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


相关推荐

  • linux系统管理初学者指南 基于centos 7.6下载_centos查看运行的进程

    linux系统管理初学者指南 基于centos 7.6下载_centos查看运行的进程目录一、进程概念1.进程组成部分:2.僵尸进程:3.线程:4.上下文切换:5.中断处理:6.进程的属性二、ps查看进程工具1.-aux弹出消息及详解2、linux进程有5种基本状态三、free查看内存使用情况1.弹出消息及详解:三、uptime查看系统负载1.弹出消息含意如下:四、top命令动态性能分析工具1.每行信息2.top快捷键:五、lsof命令用于查看你进程调用、打开的文件六、kill关闭进程1)ki

    2022年9月4日
    2
  • html中空格的写法[通俗易懂]

    html中空格的写法[通俗易懂]HTML不是一种编程语言,而是一种超文本标记语言(markuplanguage),是网页制作所必备的。超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。方法1:使用键盘,键入空格在html页面中,我们可以通过键入“空格”键来插入空格。例:在p.p1中键入一个空格,在p.p2中键入5个空格。注:此时是半角状态键入“空格”:<pclass=”p1″>测试文字|HTML中文网!</p><pclass=”p2″>测试文字|HTM

    2022年6月16日
    29
  • vue生命周期钩子函数(详解及使用场景)(什么是vue的生命周期)

    vue中生命周期钩子函数有哪些发布时间:2020-12-0713:07:03来源:亿速云阅读:94作者:小新这篇文章主要介绍vue中生命周期钩子函数有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Vue实例的生命周期钩子函数(8个)1、beforeCreate刚new了一个组件,无法访问到数据和真实的dom,基本上这个好像不能干啥2、createddata属性完成了…

    2022年4月12日
    151
  • java实现高斯日记[通俗易懂]

    java实现高斯日记[通俗易懂]题目标题:高斯日记大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记上标注着:5343,因…

    2022年4月30日
    41
  • 列举出linux文件和目录常用的命令_查看centos根目录下有哪些内容

    列举出linux文件和目录常用的命令_查看centos根目录下有哪些内容目录命令总览ls(英文全拼:listfiles):列出目录及文件名cd(英文全拼:changedirectory):切换目录pwd(英文全拼:printworkdirectory):显

    2022年7月29日
    3
  • C语言使用正则表达式

    C语言使用正则表达式目录C语言中的正则表达式使用C语言中的正则表达式使用  正则表达式,又称正规表示法、常规表示法(英语:RegularExpression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表达式是使用单个字符串来描述、匹配一系列符合某…

    2022年7月15日
    11

发表回复

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

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