vuex結合session存儲數據解決頁面刷新數據丟失問題

Posted on by

前言

在項目中表單篩選項裡，選擇完之後刷新頁面數據就變瞭，沒有保留在自己選擇的選項上。
在項目中是使用vuex保存數據，但是網頁刷新後，store中保存的數據丟失瞭。

提示：以下是本篇文章正文內容，下面案例可供參考

一、原因：

vuex作為全局的數據狀態管理機制，store中的數據是保存在運行內存中，當頁面刷新時，頁面會重新加載vue實例，store裡邊的數據就會被重新賦值變成初始化狀態。

二、解決思路：

將vuex與本地存儲結合使用，頁面刷新數據不會丟失

1.本地存儲方法:

1、localStorage：永久式存儲，關閉頁面或瀏覽器之後localStorage存儲的數據不會消失。除非主動刪除數據，否則永遠不會消失。
以Chrome瀏覽器為例，數據放在C:\Users\你的計算機名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
2、sessionStorage：僅在當前會話下有效，關閉當前頁面或瀏覽器數據就會被銷毀。sessionStorage實在同源的窗口中始終存在是數據，頁面刷新還在，隻要關閉當前頁面就銷毀瞭。
3、cookie：如果不在瀏覽器中設置過期時間，cookie被保存在內存中，生命周期隨瀏覽器的關閉而結束，這種cookie簡稱會話cookie。如果在瀏覽器中設置瞭cookie的過期時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過期時間結束才消失。。cookie存放數據大小為4kb左右，一般不能超過20個，不能存儲大數據。

拓展：cookie適用場景
（1）判斷用戶是否登陸過網站，以便下次登錄時能夠實現自動登錄（或者記住密碼）。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關信息。
（2）保存上次登錄的時間等信息。
（3）保存上次查看的頁面（保存訪問過的路由信息）
（4）瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
（5）個性化設置（如用戶自定義設置，主題等）

2.實現步驟：

由於vue是單頁面應用，操作都是在一個頁面完成，而且此項目隻在當前打開項目中使用，所以用sessionStorage比較合適

  • 將數據保存在state中，state數據通過mutation方法進行修改，mutation修改state的時候同時將數據保存在sessionStorage中。
  • 在項目打開時，在App.vue中初始化數據，如果本地存儲有數據，那麼就調用actions中的方法給state賦值。
  • 在表單項進行選擇時，同時修改state中的數據。
//store/selectData.js
const state = {//state中存放數據
  dataList: {
    exchangeIdSum: null,
  }
}
const mutations = {
  setExchangeIdSum(state, data) {//將選中的數據重新賦值，並保存到sessionStorage中
    state.dataList.exchangeIdSum = data
    sessionStorage.setItem('dataList',JSON.stringify(state.dataList))
  }
  setDataList(state, data) {
    state.dataList = JSON.parse(JSON.stringify(data))
  }
}
const actions = {
  resetDataList: ({commit}, list) =>{
    setTimeout(() => {
      commit('setDataList', list)
    }, 2000);
  }
}
export default {
  state,
  mutations,
  actions,
}

//表單篩選頁面中操作
methods: {
  exchangeChange(val) {//下拉框選擇時修改state中數據
    this.$store.commit('selectData/setExchangeIdSum', val)
  },
}
//App.vue中
created(){//頁面一進入判斷sessionStorage中是否有數據
  sessionStorage.getItem('dataList')?
  this.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3.優化：

由於之前修改state數據時，mutation每次修改時都要修改sessionStorage，但如果修改的state數據很多，那每次都會修改sessionStorage，此操作略顯麻煩

在這裡插入圖片描述

解決：
① 可以將數據直接存到sessionStorage中
② vue在每次刷新時頁面都會丟失，可以在頁面刷新前將數據存放在sessionStorage中，beforeunload事件可以在頁面刷新前觸發

到此這篇關於vuex結合session存儲數據解決頁面刷新數據丟失問題的文章就介紹到這瞭,更多相關vuex session存儲數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：