vuex存储数据，刷新页面后导致数据丢失【亲测可用，可供参考】

分手后的思念是犯贱 2022-10-31 13:43 74阅读 0赞

**问题描述**

> 使用*vuex*存储全局数据后，刷新浏览器页面导致数据丢失

**原因分析**

*  刷新页面时，*vue*实例重新加载，因此导致*store*也随之被重置
 *  *store*是用来存储组件状态的，而不是用来做本地数据存储的
 *  对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储

**解决方式**

*  **本地存储**
    
    > ***cookie*：** 不适合存储较大的数据 （一段不超过4KB的小型文本数据）
    
    > ***localStorage*：** 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储）
    
    > ***sessionStorage*：** 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（**推荐**）
 *  **推荐方式**
    
     *  通过监听 *beforeunload* 方法（页面刷新时触发），且将在页面**刷新前**将数据存到 *sessionStorage* 中
     *  在页面**刷新时**，将从 *sessionStorage* 中读取到的数据添加到 *store* 中

**以下示例代码请在 *App.vue* 中操作**

<template>
      <div id="app">
        <router-view />
      </div>
    </template>
    
    <script>
    export default {
        
      name: 'App',
      created() {
        
        // 在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem('store')) {
        
          this.$store.replaceState(
            Object.assign(
              {
        },
              this.$store.state,
              JSON.parse(sessionStorage.getItem('store'))
            )
          )
        }
    
        // 页面刷新时，将vuex里的信息保存到sessionStorage
        // 在页面刷新时先触发beforeunload事件
        window.addEventListener('beforeunload', () => {
        
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
      },
    }
    </script>