vuex頁(yè)面刷新后數(shù)據(jù)丟失的方法

更新時(shí)間：2019年01月17日 08:26:56 作者：jrue

這篇文章主要介紹了vuex頁(yè)面刷新后數(shù)據(jù)丟失的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1. 原因

（1）js代碼是運(yùn)行在內(nèi)存中的，代碼運(yùn)行時(shí)的所有變量、函數(shù)都是保存在內(nèi)存中。
（2）刷新頁(yè)面，以前申請(qǐng)的內(nèi)存被釋放，重新加載腳本代碼，變量要重新賦值。
（3）要想刷新后數(shù)據(jù)不丟失就必須把數(shù)據(jù)存儲(chǔ)在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將數(shù)據(jù)存儲(chǔ)在硬盤上，做持久化存儲(chǔ)。

2. HTML5提供的2種客戶端存儲(chǔ)數(shù)據(jù)的新方法

localStorage存儲(chǔ)數(shù)據(jù)：

（1）存儲(chǔ)的數(shù)據(jù)是永久性的，永不過(guò)期；
（2）作用域是限定在文檔源級(jí)別的。同源的文檔間共享同樣的localStorage數(shù)據(jù)（不論該源的腳本是否真正的訪問(wèn)localStorage）。
他們可以互相讀取對(duì)方的數(shù)據(jù)，甚至可以覆蓋對(duì)方的數(shù)據(jù)。但是，非同源的文檔間互相都不能讀取或者覆蓋對(duì)方的數(shù)據(jù)。（即使他們運(yùn)行的腳本是來(lái)自同一臺(tái)第三方的服務(wù)器也不行）。

sessionStorage存儲(chǔ)數(shù)據(jù)：

（1）會(huì)話，當(dāng)瀏覽器關(guān)閉時(shí)會(huì)話結(jié)束并清除數(shù)據(jù)，有時(shí)間期限；
（2）存儲(chǔ)數(shù)據(jù)的有效期和存儲(chǔ)數(shù)據(jù)的腳本所在的最頂層的窗口或者是瀏覽器標(biāo)簽頁(yè)是一樣的，一旦窗口或者標(biāo)簽頁(yè)被永久關(guān)閉了，

那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也都被刪除了。

3.具體實(shí)現(xiàn)（登入后保存狀態(tài)，退出后移除狀態(tài)）

// vuex mutations
const mutations = {
  setToken(state, token) {
    // 保存用戶認(rèn)證Token
    sessionStorage.setItem('token', token);
    state.token = token;
  },
  setUser(state, user) {
    // 保存用戶信息
    sessionStorage.setItem('user', JSON.stringify(user));
    state.user = user;
  },
  // 注銷登錄，清除token
  logout(state) {
    state.token = null;
    state.user = null;
    sessionStorage.removeItem('token');
    sessionStorage.removeItem('user');
  }
};

// vuex getters
const getters = {
  getToken(state){
    if(state.token === null){
      state.token = sessionStorage.getItem('token')
    }
    return state.token;
  },
  // 獲取當(dāng)前用戶登錄信息
  getUser(state) {
    if(state.user === null) {
      state.user = JSON.parse(sessionStorage.getItem('user'));
    }
    return state.user;
  }
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: