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


相关推荐

  • 大数据面试题——HBase面试题总结

    大数据面试题——HBase面试题总结1、HBase的特点是什么?1)大:一个表可以有数十亿行,上百万列;2)无模式:每行都有一个可排序的主键和任意多的列,列可以根据需要动态的增加,同一张表中不同的行可以有截然不同的列;3)面向列:面向列(族)的存储和权限控制,列(族)独立检索;4)稀疏:空(null)列并不占用存储空间,表可以设计的非常稀疏;5)数据多版本:每个单元中的数据可以有多个版本,默认情况下版本号自动分配,是单元格插入时的时间戳;6)数据类型单一:Hbase中的数据都是字符串,没有类型。2…

    2022年5月31日
    33
  • sqlyog下载安装_sqlyog激活成功教程版

    sqlyog下载安装_sqlyog激活成功教程版地址:https://github.com/webyog/sqlyog-community/wiki/Downloads

    2022年9月23日
    1
  • 2020最火的编程语言_2020年牛会掉价吗

    2020最火的编程语言_2020年牛会掉价吗大学新生看过来。

    2022年10月5日
    4
  • linux 搜狗输入法包名,搜狗输入法[通俗易懂]

    linux 搜狗输入法包名,搜狗输入法[通俗易懂]应用介绍搜狗输入法,拥有高效优质中文词库,输入更加准确,智能。搜狗智能旺仔带你用AI表达,斗图,妙语,输入更加有趣。******特色功能******【搜狗专属高效词库】搜狗多年积累,百万级中文系统词库,输入首选更准确【优选云词库】新词汇、热门网络语、热门流行语、饭圈新密语实时更新,跟上时髦的你【智能长句输入】只需输入几个字母,就能猜中你要说的话,准确补全,省时省力【AI智能汪仔】AI输入用搜狗,智…

    2022年7月26日
    3
  • 怎么获取smtp服务器用户帐号和密码

    怎么获取smtp服务器用户帐号和密码

    2021年9月21日
    253
  • 数仓建模与分析建模_数据仓库建模与数据挖掘建模

    数仓建模与分析建模_数据仓库建模与数据挖掘建模1.数仓概述数据仓库:数据仓库是一个面向主题的、集成的、非易失的、随时间变化的数据集合。重要用于组织积累的历史数据,并且使用分析方法(OLAP、数据分析)进行分析整理,进而辅助决策,为管理者、企业系统提供数据支持,构建商业智能。面向主题:为数据分析提供服务,根据主题将原始数据集合在一起。集成的:原始数据来源于不同的数据源,要整合成最终数据,需要经过ETL(抽取、清洗、转换)的过程。非易失:保存的数据是一系列历史快照,不允许被修改,只允许通过工具进行查询、分析。时变性:数仓会定期接收、集成新的

    2022年9月23日
    3

发表回复

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

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