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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • spring ajax 长轮询,Ajax轮询和长轮询

    spring ajax 长轮询,Ajax轮询和长轮询缺点:Ajax轮询需要服务器有很快的处理速度与快速响应。longpoll需要很高的并发,体现在同时容纳请求的能力。一、轮询是在浏览器客户端实现的:如果从后端获取数据成功则停止请求。$(function(){varcode,status;functiongetResult(){varparams={code:code,operate:’什么操作TODO:’,};$.ajax({typ…

    2022年10月14日
  • 特色网站收集(332个)「建议收藏」

    特色网站收集(332个)「建议收藏」1.del.icio.ushttp://del.icio.us/在线收藏夹.域名很有创意.影响也很广.支持从浏览器导出和导出到浏览器.2.Anonymousehttp://anonymouse.org

    2022年7月3日
  • dao层和service层和control代码(Java简述抽象类和接口的区别)

    DAO层:DAO层叫数据访问层,全称为dataaccessobject,属于一种比较底层,比较基础的操作,具体到对于某个表的增删改查,也就是说某个DAO一定是和数据库的某一张表一一对应的,其中封装了增删改查基本操作,建议DAO只做原子操作,增删改查。Service层:Service层叫服务层,被称为服务,粗略的理解就是对一个或多个DAO进行的再次封装,封装成一个服务,所以这里也就不…

    2022年4月18日
  • 给自己的XTC820摆拍一下。[通俗易懂]

    给自己的XTC820摆拍一下。[通俗易懂]上个月入手了捷安特的XTC820,始终没有时间为爱车拍几张照,今天凑着在办公室的机会,就随手拍了几张,展示一下XTC820。先给大家看图片,然后再分享一下当初我买它的原因以及车的规格。下面就来简单说一下我为什么选择这个XTC系列?主要是考虑路面问题,目前上海的道路坑坑洼洼,铺装路面的自行车不太适合,…

    2022年10月21日
  • iOS 邮箱正则表达式「建议收藏」

    iOS 邮箱正则表达式「建议收藏」邮箱正则表达式

    2022年6月24日
  • ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)「建议收藏」

    ubuntu16.04安装MATLAB R2017b步骤详解(附完整文件包)「建议收藏」摘要:介绍在ubuntu16.04中从下载到安装成功的完整步骤。本文给出MATLABR2017b(Linux系统)的完整安装包百度云盘下载地址,逐步介绍一种简单易行的安装方法,在桌面创建快捷方式,最终完整运行。

    2022年4月30日

发表回复

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

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