vue 本地存储数据 sessionStorage

Posted 2020-11-19 snowhite

在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赋值为空

参考文献：http://www.w3school.com.cn/html5/html_5_webstorage.asp