标签：浏览器 name 数据 sessionStorage localStorage 丢失 刷新 Vuex 页面

原因

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载Vue实例，store里面的数据就会被重新赋值初始化

解决思路

将state的数据保存在localstorage、sessionstorage或cookie中，这样即可保证页面刷新数据不丢失且易于读取

• localStorage

  ​ localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失.localStorage除非主动删除数据，否则数据永远不会消失

• sessionStorage

  ​ sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的

• Cookie

  ​ Cookie生命期为只在设置的Cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

由于sessionStorage能保存的数据比Cookie对,且不用像localStorage每次打开页面需要清空之前的数据,所以sessionStorage是最好的选择

<template>
  <div id="app">
    <h1>My name is {{name}}</h1>
   <button @click="updata">更新</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
export default {
  name: "App",
  data:()=>({
    name: 'Guiyun'
  }),
  components: {
  },
  created(){
    this.getName()
  },
  methods:{
    getName(){
      if (sessionStorage.getItem("name")){
        this.name = sessionStorage.getItem("name")
      }
    },
    updata(){
      sessionStorage.setItem('name', '归云');
       this.getName()
    }
  }
};
</script>

标签：浏览器,name,数据,sessionStorage,localStorage,丢失,刷新,Vuex,页面
来源： https://blog.csdn.net/qq_35170166/article/details/120264922

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。