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)
    }
  }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 向自增长表中插入数据可使用default填充自增长字段

    向自增长表中插入数据可使用default填充自增长字段向自增长表中插入数据可使用default填充自增长字段

    2022年4月23日
    38
  • strsep的作用

    strsep的作用在下面这个code中通过strsep将p表示的字符串一“,”分开,例如12,34,56.会先返回12,然后是34,最后是56while((id=strsep(&p,”,”)))我们看看strsep的实现char*strsep(char**s,constchar*ct){   char*sbegin=*s;   char*end;  

    2025年6月26日
    2
  • SpringDataJpa:JpaRepository增删改查

    SpringDataJpa:JpaRepository增删改查Jpa查询1.JpaRepository简单查询基本查询也分为两种,一种是springdata默认已经实现,一种是根据查询的方法来自动解析成SQL。 预先生成方法 springdatajpa默认预先生成了一些基本的CURD的方法,例如:增、删、改等等继承JpaRepositorypublicinterfaceUserRepositoryextends…

    2022年10月20日
    3
  • python 生成数组_Python创建数组「建议收藏」

    python 生成数组_Python创建数组「建议收藏」1创建数组array函数>>>a=([1,2],[3,4])>>>array(a)array([[1,2],[3,4]])arange函数:指定初始值、终值、步长来创建数组>>>importnumpy>>>numpy.arange(0,1,0.1)array([0.,0.1,0.2,0.3,0.4…

    2022年5月9日
    294
  • sin的傅里叶变换公式_傅里叶变换的由来及复数下的傅里叶变换公式证明

    sin的傅里叶变换公式_傅里叶变换的由来及复数下的傅里叶变换公式证明1、考虑到一个函数可以展开成一个多项式的和,可惜多项式并不能直观的表示周期函数,由于正余弦函数是周期函数,可以考虑任意一个周期函数能否表示成为一系列正余弦函数的和。假设可以,不失一般性,于是得到:f(t)=A0+∑(n=1,∞)Ansin(nωt+Φn)2、将后面的正弦函数展开:Ansin(nωt+Φn)=AnsinΦncosnωt+AncosΦnsinnωt令a0/2=A0,an…

    2022年7月17日
    17
  • 怎么将pdf转换成image_php从入门到精通 pdf

    怎么将pdf转换成image_php从入门到精通 pdf上次找到fpdf发现文档支持不足。而且含有php5.4不能用了的过期函数,图片进去也显示不了等问题。特意找到这个tcpdf。下载的地址搞一个试试中文字体包下载%20Sans%20Fallback%20-%20PHP.zip/download下载后,将它解压放在droidsansfallback.php、droidsansfallback.z以及droidsansfallback.ctg.z这三个文…

    2022年9月6日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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