浅析Vue怎样在页面刷新时保留状态信息

1、通过本地存储 state中的数据，页面刷新成功后再次从本地存储中读取state数据

//  vuex中的数据发生改变时触发localStorage的存储操作localstorage.setItem('state', JSON.stringify(this.$store.state))//  页面加载的时候在created中获取本地存储中的数据localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));

注意：该操作会频繁的触发localStorage的存取工作

2、 监听页面刷新，触发存取操作

首先在入口组件App.vue中的created中利用localstorage或者sessionStorage来存取state中的数据

//   在页面加载时读取sessionStorage里的状态信息if ( sessionStorage.getItem('state') ) {  this.$store.replaceState( Object.assign( {}, this.$store.state,  JSON.parse(sessionStorage.getItem('state') ) ) )}//   页面刷新时将state数据存储到sessionStorage中window.addEventListener('beforeunload',()=>{  sessionStorage.setItem('state',JSON.stringify(this.$store.state) )})

注意：Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象

vuex状态保留

到这里，我们在PC端、安卓端、mac端safair浏览器中均能正常访问，但是在ios端的safair浏览器中存在问题，页面刷新后拿不到数据。

原因：在ios端beforeunload方法未执行，造成state数据未存储到本地，通过查询ios官方文档，文档中说unload和beforeunload已经废弃，使用pagehide作为代替

window.addEventListener('pagehide', () => {     sessionStorage.setItem('state', JSON.stringify(this.$store.state))   })

这样一番改动后，果然在PC端、安卓端、ios端均未出现问题

会话历史事件

• pageshow事件：在用户访问页面时触发；pageshow 事件类似于 onload 事件，onload 事件在页面第一次加载时触发， pageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。
• pagehide事件：在用户离开当前网页时触发；pagehide 事件有时可以替代 unload事件，但 unload 事件触发后无法缓存页面。

方法补充

在 Vue 应用中，页面刷新会导致浏览器重新加载整个应用，内存中的响应式数据（如 Vuex 或 Pinia 中的状态）会被清空。要保留状态信息，必须将数据持久化到物理存储中，最常用的是 localStorage 或 sessionStorage。

下面介绍几种常见且高效的实现方式。

手动使用 localStorage 存储/恢复关键状态

适用于简单场景，仅需持久化少量数据。

// 在 store 或组件中export default {  data() {    return {      myState: JSON.parse(localStorage.getItem('myState')) || '默认值'    }  },  watch: {    myState: {      handler(newVal) {        localStorage.setItem('myState', JSON.stringify(newVal))      },      deep: true    }  },  created() {    // 也可在 created 钩子中读取    const saved = localStorage.getItem('myState')    if (saved) this.myState = JSON.parse(saved)  }}

缺点：每个状态都需要手动监听和序列化，工程量大。

Vuex + vuex-persistedstate 插件

Vuex 官方推荐，自动将整个或部分 state 同步到 localStorage。

1. 安装

npm install vuex-persistedstate

2. 在 store 中使用

import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({  state: {    userInfo: null,    token: '',    theme: 'light'  },  mutations: {    setUserInfo(state, info) { state.userInfo = info },    setToken(state, token) { state.token = token },    setTheme(state, theme) { state.theme = theme }  },  plugins: [    createPersistedState({      // 可选配置      key: 'my-app-state',          // 存储的 key      paths: ['userInfo', 'theme'], // 仅持久化这两个字段（不保存 token 等敏感信息）      storage: window.localStorage  // 默认 localStorage    })  ]})

页面刷新后，Vuex 会自动从 localStorage 读取数据并恢复到 state 中。

注意：避免将敏感信息（如 token、密码）持久化到 localStorage，以防 XSS 攻击。

Pinia + pinia-plugin-persistedstate 插件

Pinia 是 Vue 新一代的状态管理库，同样有官方持久化插件。

1. 安装

npm install pinia-plugin-persistedstate

2. 启用插件

// store/index.jsimport { createPinia } from 'pinia'import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()pinia.use(piniaPluginPersistedstate)export default pinia

3. 在 store 中配置持久化

// stores/user.jsimport { defineStore } from 'pinia'export const useUserStore = defineStore('user', {  state: () => ({    userInfo: null,    token: '',    theme: 'light'  }),  actions: {    setUserInfo(info) { this.userInfo = info },    setToken(token) { this.token = token }  },  persist: {    key: 'user-store',        // 存储的 key    paths: ['userInfo', 'theme'], // 只持久化这两个字段    storage: localStorage      // 可选 sessionStorage  }})

无需额外代码，页面刷新后 store 状态自动恢复。

使用 sessionStorage 区别对待

• localStorage：持久化存储，除非手动清除，否则一直存在。
• sessionStorage：仅在当前标签页会话期间有效，关闭标签页即清除。

可根据业务需求选择，例如用户登录信息用 sessionStorage，主题设置用 localStorage。

// 手动写法sessionStorage.setItem('key', value)let val = sessionStorage.getItem('key')// 插件中修改 storage 参数createPersistedState({ storage: window.sessionStorage })

注意事项与最佳实践

安全性：

• 不要存储用户密码、支付密码等绝对敏感信息。
• 若存储 token，请配合后端刷新机制并设置短过期时间，避免长期泄露风险。

性能：

• 避免持久化大型对象（如列表数据），会导致存储占用过高且序列化/反序列化耗时。
• 对于大数据，可考虑 IndexedDB。

兼容性：

• localStorage 容量约 5~10MB，超出会报错。
• 部分隐私模式可能禁用 localStorage，需做降级处理（如内存存储）。

版本管理：当存储的数据结构发生变化时，可在 created 或插件中做迁移清理，避免旧数据导致错误。

总结

对于现代 Vue 3 项目，推荐使用 Pinia + 持久化插件，代码最简洁，维护成本最低。