码迷,mamicode.com
首页 > 其他好文 > 详细

vue 本地存储数据 sessionStorage

时间:2018-01-05 19:05:40      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:fun   ebs   elf   判断   site   数据   ted   前端   get   

在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

标签:fun   ebs   elf   判断   site   数据   ted   前端   get   

原文地址:https://www.cnblogs.com/yu-hailong/p/8206158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!