目錄

• 前言
• 一、原因：
• 二、解決思路：
• 1.本地儲存方法:
• 2.實現步驟：
• 3.優化：

前言

在專案中表單篩選項裡，選擇完之後重新整理頁面資料就變了，沒有保留在自己選擇的選項上。
在專案中是使用x儲存資料，但是重新整理後，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.
const state = {//state中存放資料
  dataList: {
    exchangeIdSum: null,}
}
const mutations = {
  setExchangeIdSum(state,data) {//將選中的資料重新賦值，並儲存到sessionStorage中
    state.dataList.exchangeIdSum = data
    sesswww.cppcns.comionStorage.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中是否http://www.cppcns.com有資料
  sessionStorage.getItem('dataList')?
  this.$store.dispatch('selectData/resetDataList',JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3.優化：

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

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

到此這篇關於vuex結合session儲存資料解決頁面重新整理資料丟失問題的文章就介紹到這了,更多相關vuex session儲存資料內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！