zoukankan      html  css  js  c++  java
  • 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赋值为空

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

  • 相关阅读:
    Mac下安装brew
    Mac下安装node.js
    Mac下mysql服务端密码重置及环境配置
    Mac配置jdk以及maven
    Mac下卸载jdk
    34个漂亮的应用程序后台管理界面(系列一)
    ViewState
    get和post
    无刷新 分页评论
    isPostBack原理
  • 原文地址:https://www.cnblogs.com/snowhite/p/9216691.html
Copyright © 2011-2022 走看看