前言

在項(xiàng)目中表單篩選項(xiàng)里，選擇完之后刷新頁面數(shù)據(jù)就變了，沒有保留在自己選擇的選項(xiàng)上。
在項(xiàng)目中是使用vuex保存數(shù)據(jù)，但是網(wǎng)頁刷新后，store中保存的數(shù)據(jù)丟失了。

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

一、原因：

vuex作為全局的數(shù)據(jù)狀態(tài)管理機(jī)制，store中的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中，當(dāng)頁面刷新時(shí)，頁面會(huì)重新加載vue實(shí)例，store里邊的數(shù)據(jù)就會(huì)被重新賦值變成初始化狀態(tài)。

二、解決思路：

將vuex與本地存儲(chǔ)結(jié)合使用，頁面刷新數(shù)據(jù)不會(huì)丟失

1.本地存儲(chǔ)方法:

1、localStorage：永久式存儲(chǔ)，關(guān)閉頁面或?yàn)g覽器之后localStorage存儲(chǔ)的數(shù)據(jù)不會(huì)消失。除非主動(dòng)刪除數(shù)據(jù)，否則永遠(yuǎn)不會(huì)消失。
以Chrome瀏覽器為例，數(shù)據(jù)放在C:\Users\你的計(jì)算機(jī)名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
2、sessionStorage：僅在當(dāng)前會(huì)話下有效，關(guān)閉當(dāng)前頁面或?yàn)g覽器數(shù)據(jù)就會(huì)被銷毀。sessionStorage實(shí)在同源的窗口中始終存在是數(shù)據(jù)，頁面刷新還在，只要關(guān)閉當(dāng)前頁面就銷毀了。
3、cookie：如果不在瀏覽器中設(shè)置過期時(shí)間，cookie被保存在內(nèi)存中，生命周期隨瀏覽器的關(guān)閉而結(jié)束，這種cookie簡(jiǎn)稱會(huì)話cookie。如果在瀏覽器中設(shè)置了cookie的過期時(shí)間，cookie被保存在硬盤中，關(guān)閉瀏覽器后，cookie數(shù)據(jù)仍然存在，直到過期時(shí)間結(jié)束才消失。。cookie存放數(shù)據(jù)大小為4kb左右，一般不能超過20個(gè)，不能存儲(chǔ)大數(shù)據(jù)。

拓展：cookie適用場(chǎng)景
（1）判斷用戶是否登陸過網(wǎng)站，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）。如果我們刪除cookie，則每次登錄必須從新填寫登錄的相關(guān)信息。
（2）保存上次登錄的時(shí)間等信息。
（3）保存上次查看的頁面（保存訪問過的路由信息）
（4）瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
（5）個(gè)性化設(shè)置（如用戶自定義設(shè)置，主題等）

2.實(shí)現(xiàn)步驟：

由于vue是單頁面應(yīng)用，操作都是在一個(gè)頁面完成，而且此項(xiàng)目只在當(dāng)前打開項(xiàng)目中使用，所以用sessionStorage比較合適

• 將數(shù)據(jù)保存在state中，state數(shù)據(jù)通過mutation方法進(jìn)行修改，mutation修改state的時(shí)候同時(shí)將數(shù)據(jù)保存在sessionStorage中。
• 在項(xiàng)目打開時(shí)，在App.vue中初始化數(shù)據(jù)，如果本地存儲(chǔ)有數(shù)據(jù)，那么就調(diào)用actions中的方法給state賦值。
• 在表單項(xiàng)進(jìn)行選擇時(shí)，同時(shí)修改state中的數(shù)據(jù)。

//store/selectData.js
const state = {//state中存放數(shù)據(jù)
  dataList: {
    exchangeIdSum: null,
  }
}
const mutations = {
  setExchangeIdSum(state, data) {//將選中的數(shù)據(jù)重新賦值，并保存到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) {//下拉框選擇時(shí)修改state中數(shù)據(jù)
    this.$store.commit('selectData/setExchangeIdSum', val)
  },
}
//App.vue中
created(){//頁面一進(jìn)入判斷sessionStorage中是否有數(shù)據(jù)
  sessionStorage.getItem('dataList')?
  this.$store.dispatch('selectData/resetDataList', JSON.parse(sessionStorage.getItem('dataList'))):{}
}

3.優(yōu)化：

由于之前修改state數(shù)據(jù)時(shí)，mutation每次修改時(shí)都要修改sessionStorage，但如果修改的state數(shù)據(jù)很多，那每次都會(huì)修改sessionStorage，此操作略顯麻煩

解決：
① 可以將數(shù)據(jù)直接存到sessionStorage中
② vue在每次刷新時(shí)頁面都會(huì)丟失，可以在頁面刷新前將數(shù)據(jù)存放在sessionStorage中，beforeunload事件可以在頁面刷新前觸發(fā)

到此這篇關(guān)于vuex結(jié)合session存儲(chǔ)數(shù)據(jù)解決頁面刷新數(shù)據(jù)丟失問題的文章就介紹到這了,更多相關(guān)vuex session存儲(chǔ)數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論