vue 刷新保存数据_vuex数据何时清除

vue 刷新保存数据_vuex数据何时清除在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在sessionStorage/localStorage因为这样会暴露一些存储信息,安全起见只能存储在vuex里面,但是vuex刷新之后state里面的信息依旧会被清除,我们的思路是刷新之前把所有的数据存储在localStorage里面,刷新后取出里面的数据,并清除local/session里面的记录,这种全局的我们可以放在app.vue里面,下面是代码实现//app.vuecreated(){//在页面

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

在项目中我们通常会遇到这样一个情况,客户不允许把信息存储在 sessionStorage / localStorage 因为这样会暴露一些存储信息,安全起见只能存储在 vuex 里面,但是 vuex 刷新之后 state 里面的信息依旧会被清除,我们的思路是刷新之前把所有的数据存储在 localStorage 里面,刷新后取出里面的数据,并清除 local/session 里面的记录,这种全局的我们可以放在 app.vue 里面,下面是代码实现

// app.vue
created(){ 
   
    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{ 
   
      localStorage.setItem("userComMsg",JSON.stringify(this.$store.state))
    });

    //在页面加载时读取localStorage里的状态信息
    if(localStorage.getItem("userComMsg")){ 
   
      Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userComMsg")));
      //使用后清除内存
      setTimeout(function () { 
   
        localStorage.removeItem("userComMsg");
      },300)
    }
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/181327.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • MATLAB(2)–MATLAB矩阵的表示

    MATLAB(2)–MATLAB矩阵的表示MATLAB–MATLAB矩阵的表示矩阵的建立冒号表达式linspace结构矩阵单元矩阵最后矩阵的建立利用直接输入法建立矩阵:将矩阵的元素用中括号括起来,按矩阵的顺序输入各元素,同一行的各元素之间用逗号或者空格分隔,不同的元素之间用分号分隔。利用已建好的矩阵建立更大的矩阵:一个大矩阵可以由已经建立好的小矩阵拼接而成。可以用实部矩阵和虚部矩阵构成复数矩阵。冒号表达式冒号是一个重要的运算符,利用它可以产生行向量。冒号表达式的一般格式为:e1:e2:e3其中,e1为初始值,e2为步长,e3为终

  • mac 如何安装 wget

    mac 如何安装 wget1.安装Homebrew在安装wget之前需要安装一个适用于mac的包管理器Homebrew,打开mac终端执行如下命令进行安装:/usr/bin/ruby-e”$(curl-fsSLhttps://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)”安装成功后的界面如下所示:2.安装wgetHomebrew安装成功后就可以执行如下命令安装wget了:brewinstallwget安装成功的界面如下:

    2022年10月17日
  • 基于AWS云服务的批处理系统架构

    基于AWS云服务的批处理系统架构

  • stm32 spi协议_STM32库开发实战指南:基于STM32F4

    stm32 spi协议_STM32库开发实战指南:基于STM32F4深入讲解SPI协议通信时序,详细解析SPI读写串行FALSH实验,NorFlash的存储特性以及读写指令的详细介绍!!!

    2022年10月15日
  • Druid 加密配置

    Druid 加密配置这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Ma…

  • pycharm编译器设置_bash python

    pycharm编译器设置_bash python第一步:安装flake8运行cmd.exe,直接输入:pipinstallflake8安装完成后,用flake8-h检查是否安装成功第二步:配置打开pyCharm,在File->Settings->Tools->ExternalTools中点击“+”。Program:$PyInterpreterDirectory$/python Arguments:-mflake8–statistics$Pro…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号