快捷導(dǎo)航

淺析Vue如何在頁面刷新時保留狀態(tài)信息

更新時間：2026年04月29日 08:52:25 作者：蠟臺

本文介紹了Vuex狀態(tài)持久化的兩種方案,重點解決了iOS端Safari瀏覽器中的兼容性問題,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下

1、通過本地存儲 state中的數(shù)據(jù)，頁面刷新成功后再次從本地存儲中讀取state數(shù)據(jù)

//  vuex中的數(shù)據(jù)發(fā)生改變時觸發(fā)localStorage的存儲操作
localstorage.setItem('state', JSON.stringify(this.$store.state))

//  頁面加載的時候在created中獲取本地存儲中的數(shù)據(jù)
localStorage.getItem('state') && this.$store.replaceState(JSON.parse(localStorage.getItem('state')));

注意：該操作會頻繁的觸發(fā)localStorage的存取工作

2、監(jiān)聽頁面刷新，觸發(fā)存取操作

首先在入口組件App.vue中的created中利用localstorage或者sessionStorage來存取state中的數(shù)據(jù)

//   在頁面加載時讀取sessionStorage里的狀態(tài)信息

if ( sessionStorage.getItem('state') ) {
  this.$store.replaceState( Object.assign( {}, this.$store.state,
  JSON.parse(sessionStorage.getItem('state') ) ) )
}

//   頁面刷新時將state數(shù)據(jù)存儲到sessionStorage中

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

注意：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象。它將返回目標(biāo)對象

vuex狀態(tài)保留

到這里，我們在PC端、安卓端、mac端safair瀏覽器中均能正常訪問，但是在ios端的safair瀏覽器中存在問題，頁面刷新后拿不到數(shù)據(jù)。

原因：在ios端beforeunload方法未執(zhí)行，造成state數(shù)據(jù)未存儲到本地，通過查詢ios官方文檔，文檔中說unload和beforeunload已經(jīng)廢棄，使用pagehide作為代替

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

這樣一番改動后，果然在PC端、安卓端、ios端均未出現(xiàn)問題

會話歷史事件

pageshow事件：在用戶訪問頁面時觸發(fā)；pageshow 事件類似于 onload 事件，onload 事件在頁面第一次加載時觸發(fā)， pageshow 事件在每次加載頁面時觸發(fā)，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發(fā)。
pagehide事件：在用戶離開當(dāng)前網(wǎng)頁時觸發(fā)；pagehide 事件有時可以替代 unload事件，但 unload 事件觸發(fā)后無法緩存頁面。

方法補充

在 Vue 應(yīng)用中，頁面刷新會導(dǎo)致瀏覽器重新加載整個應(yīng)用，內(nèi)存中的響應(yīng)式數(shù)據(jù)（如 Vuex 或 Pinia 中的狀態(tài)）會被清空。要保留狀態(tài)信息，必須將數(shù)據(jù)持久化到物理存儲中，最常用的是 localStorage 或 sessionStorage。

下面介紹幾種常見且高效的實現(xiàn)方式。

手動使用 localStorage 存儲/恢復(fù)關(guān)鍵狀態(tài)

適用于簡單場景，僅需持久化少量數(shù)據(jù)。

// 在 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)
  }
}

缺點：每個狀態(tài)都需要手動監(jiān)聽和序列化，工程量大。

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 讀取數(shù)據(jù)并恢復(fù)到 state 中。

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

Pinia + pinia-plugin-persistedstate 插件

Pinia 是 Vue 新一代的狀態(tài)管理庫，同樣有官方持久化插件。

1. 安裝

npm install pinia-plugin-persistedstate

2. 啟用插件

// store/index.js
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia

3. 在 store 中配置持久化

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () =&gt; ({
    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 狀態(tài)自動恢復(fù)。

使用 sessionStorage 區(qū)別對待

localStorage：持久化存儲，除非手動清除，否則一直存在。
sessionStorage：僅在當(dāng)前標(biāo)簽頁會話期間有效，關(guān)閉標(biāo)簽頁即清除。

可根據(jù)業(yè)務(wù)需求選擇，例如用戶登錄信息用 sessionStorage，主題設(shè)置用 localStorage。

// 手動寫法
sessionStorage.setItem('key', value)
let val = sessionStorage.getItem('key')

// 插件中修改 storage 參數(shù)
createPersistedState({ storage: window.sessionStorage })

注意事項與最佳實踐

安全性：

不要存儲用戶密碼、支付密碼等絕對敏感信息。
若存儲 token，請配合后端刷新機制并設(shè)置短過期時間，避免長期泄露風(fēng)險。

性能：

避免持久化大型對象（如列表數(shù)據(jù)），會導(dǎo)致存儲占用過高且序列化/反序列化耗時。
對于大數(shù)據(jù)，可考慮 IndexedDB。

兼容性：

localStorage 容量約 5~10MB，超出會報錯。
部分隱私模式可能禁用 localStorage，需做降級處理（如內(nèi)存存儲）。

版本管理：當(dāng)存儲的數(shù)據(jù)結(jié)構(gòu)發(fā)生變化時，可在 created 或插件中做遷移清理，避免舊數(shù)據(jù)導(dǎo)致錯誤。

總結(jié)

方案	適用規(guī)模	代碼侵入性	推薦度
手動 `localStorage`	單個組件、少量狀態(tài)	高（需手動 watch）	??
Vuex + `vuex-persistedstate`	中大型 Vue 2/3 項目	低（插件配置）	????
Pinia + `pinia-plugin-persistedstate`	Vue 3 + Pinia 項目	極低（聲明式）	?????