web本地儲存(localStorage、sessionStorage)

sbwxffnhc發表於2018-12-18

本地儲存 (localStorage、sessionStorage)

說明

對瀏覽器來說,使用 Web Storage 儲存鍵值對比儲存 Cookie 方式更直觀,而且容量更大,它包含兩種:localStorage 和 sessionStorage

1. sessionStorage(臨時儲存) :為每一個資料來源維持一個儲存區域,在瀏覽器開啟期間存在,包括頁面重新載入

2. localStorage(長期儲存) :與 sessionStorage 一樣,但是瀏覽器關閉後,資料依然會一直存在
複製程式碼

API

sessionStorage 和 localStorage 的用法基本一致,引用型別的值要轉換成JSON
複製程式碼

1. 儲存資料到本地

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));
複製程式碼

2. 從本地儲存獲取資料

    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));
複製程式碼

3. 本地儲存中刪除某個儲存的資料

    sessionStorage.removeItem('key');
    localStorage.removeItem('key');
複製程式碼

4. 刪除所有儲存的資料

    sessionStorage.clear();
    localStorage.clear();
複製程式碼

5. 監聽本地儲存的變化

Storage 發生變化(增加、更新、刪除)時的 觸發,同一個頁面發生的改變不會觸發,只會監聽同一域名下其他頁面改變 Storage
複製程式碼
    window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })
複製程式碼

瀏覽器檢視方法

  • 進入開發者工具
  • 選擇 Application
  • 在左側 Storage 下 檢視 Local Storage 和 Session Storage Application

web本地儲存(localStorage、sessionStorage)

結合 React 實現使用者基本資料的本地儲存

介面UI方面的就不展示了,編寫兩個元件:<Login/>負責登入輸入驗證; <Home/> 專案主頁,展示使用者資訊
複製程式碼

1. 需求

  • 元件可以得到使用者輸入的賬號、密碼,向伺服器傳送請求後獲得 {id:'',name:'',tel:''}
  • 這些資料是 元件正確展示所必須的,否則就會跳轉到登入頁
  • 我們需要讓使用者直接開啟主頁就可以展示使用者資訊,不要再跳轉到登入頁

2. 實現

  • 使用者在登入頁填寫登入資訊後,將登入資料儲存到 localStorage 中
  • 進入主頁,首先獲取localStorage中的資料,存在資料在直接展示,否則進入登入頁

1. 登入資料儲存到 localStorage 中

在登入頁路由中配置離開頁面時處理函式,儲存的資料一小時內有效
複製程式碼
    <Route path="login" component={Login} onLeave={leaveLoginPage}/>
複製程式碼
    import store from '../store/index';

    // login 頁面 離開時邏輯
    export const leaveLoginPage = () => {
       // 離開 login 頁面 更新 localStorage 中的資料
       const {id, name, tel} = store.getState().rootReducer;
       const userInfo = {id, name, tel};
       const userInfoState = localStorage.getItem('userInfoState');

       if (userInfoState) {
          // 如果本地存在 userInfoState 將其移除
          localStorage.removeItem('userInfoState');
       }
       localStorage.setItem('userInfoState', JSON.stringify({
          userInfo,
          timestamp: new Date().getTime()
       }));
    }
複製程式碼

2. 進入主頁獲取 localStorage 中資料

在主頁路由中配置進入頁面時處理函式
複製程式碼
    <Route path="home" component={Home} onEnter={enterHomePage}>
複製程式碼
    import store from '../store/index';

    // show 頁面進入 邏輯
    export const enterHomePage = (nextState, replace, next) => {
       const rootState = store.getState().rootReducer;
       const userInfoState = JSON.parse(localStorage.getItem('userInfoState'));

       // 判斷store 中是否有使用者登入資料
       if (!rootState.isLogin) {
          // 不含有使用者登入資料,判斷 localStorage 中的資料是否可以使用
          const pass = userInfoState && userInfoState.timestamp && new Date().getTime() - userInfoState.timestamp <= 60 * 60 * 1000;

          if (pass) {
             // userInfoState 存在,並且上一次離開在一小時以內,可以讀取 localStorage 資料
             const storedUserInfo = userInfoState.userInfo;

             // 'LOGIN' 將獲取的資料更新到 store 中
             store.dispatch({type: 'LOGIN', msg: storedUserInfo});
             next();
          } else {
             // userInfoState 不存在 或者 已過期,則跳轉到登入頁
             replace('/login');
             next();
          }
       } else {
          // store 中 含有 使用者登入資料,直接進入相應頁面
          next();
       }
    }
複製程式碼

轉載的原文地址: blog.csdn.net/mjzhang1993…

相關文章