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

要怎么用就看你的需求了, 上面的方法有些老了,我用的时候还没上面的插件

转载于:https://www.cnblogs.com/yu-hailong/p/8206158.html