vue 本地存儲數據 sessionStorage

在vuex 下的 action下的userAction.js中
添加

export function login(from, self) {
    axPost('/api/login', from,
        function(res) {
            if (res.data == 0) {
                alert("賬號密碼錯誤")
            } else {
                note.commit('userloginbean', res.data);
                self.$router.push("/");
                sessionStorage.setItem("name", res.data.name);

            }
            // 
        },
        function(err) {
            alert(err);
        });
}
注 sessionStorage.setItem("name", res.data.name); HTML 5 Web 存儲在客戶端臨時存儲數據

2.在要跟行的數據中例如heade.vue中

<div class="site-nav-sign" v-if="items.name">
                          <router-link to="/login"><a href="">{{items.name}}</a></router-link>
                          <router-link to="/register"><a href="">消息</a></router-link>
                      </div>
                      <div class="site-nav-sign" v-else>
                          <router-link to="/login"><a href="">親，請登陸</a></router-link>
                          <router-link to="/register"><a href="">免費注冊</a></router-link>
                      </div>

在script中添加

export default {
     data(){
         return{
             items:{name:null}
         }
     },
     mounted:function(){
         this.items.name=sessionStorage.getItem("name");   
     }
}

后端的session過期后需要網前端發送一個值來判斷是否過期，如果過期就要重新給sessionStorage賦值為空

localStorage 和 sessionStorage 區別

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲（關閉窗口，存儲的數據清空）

參考文獻：http://www.w3school.com.cn/html5/html_5_webstorage.asp

 這個是官方給出的 緩存例子 https://cn.vuejs.org/v2/cookbook/client-side-storage.html

官方和上面的例子差別在於上面的是在wuex 返回數據的時候緩存起來, 官方通過接口方法調用

建議用官方的吧,官方vue有自己測插件 

• vue-local-storage
• vue-reactive-storage
• vue2-storage

要怎么用就看你的需求了, 上面的方法有些老了,我用的時候還沒上面的插件