1. 缘由

• （1）js代码是运转在内存中的，代码运转时的一切变量、函数都是保留在内存中。

  （2）革新页面，之前请求的内存被开释，从新加载剧本代码，变量要从新赋值。

  （3）要想革新后数据不丧失就必须把数据存储在外部，比方：Local Storage、Session Storage、Index DB等。这些都是浏览器供应的API，让你能够将数据存储在硬盘上，做耐久化存储。

2. HTML5供应的2种客户端存储数据的新方法

• localStorage存储数据：

  （1）存储的数据是永远性的，永不逾期；

  （2）作用域是限定在文档源级别的。同源的文档间同享一样的localStorage数据（不管该源的剧本是不是真正的接见localStorage）。

  他们能够相互读取对方的数据，以至能够掩盖对方的数据。然则，非同源的文档间相互都不能读取或许掩盖对方的数据。

  （纵然他们运转的剧本是来自统一台第三方的服务器也不可）。

• sessionStorage存储数据：

  （1）会话，当浏览器封闭时会话完毕并消灭数据，有时间限期；

  （2）存储数据的有效期和存储数据的剧本地点的最顶层的窗口或许是浏览器标签页是一样的，一旦窗口或许标签页被永远封闭了，

  那末一切经由过程sessionStorage存储的数据也都被删除了。

3.详细完成（登入后保留状况，退出后移除状况）

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