本地存储

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);
    })

1. 登录数据存储到 localStorage 中
   在登录页路由中配置离开页面时处理函数，存储的数据一小时内有效

  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 中数据

在主页路由中配置进入页面时处理函数

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();
     }
  }