首页 > 其他 > 详细

vue 本地存储数据 sessionStorage

时间:2018-06-23 12:16:34      阅读:116      评论:0      收藏:0      [点我收藏+]

在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

vue 本地存储数据 sessionStorage

原文:https://www.cnblogs.com/snowhite/p/9216691.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!