1. 原因

目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)頁空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設計、富源網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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

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

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

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

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

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

// vuex mutations
const mutations = {
  setToken(state, token) {
    // 保存用戶認證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;
  },
  // 獲取當前用戶登錄信息
  getUser(state) {
    if(state.user === null) {
      state.user = JSON.parse(sessionStorage.getItem('user'));
    }
    return state.user;
  }
};

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：vuex頁面刷新后數(shù)據(jù)丟失的方法
分享網(wǎng)址：http://www.chinadenli.net/article32/jsijsc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計公司、全網(wǎng)營銷推廣、微信公眾號、Google、小程序開發(fā)、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)