Vue 使用localStorage保存登录状态

使用localStorage保存登录状态

相关概念：

• 只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。

• localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

• 应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

• 另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型)。

1、保存数据语法：

localStorage.setItem("key", "value");

2、读取数据：

var lastname = localStorage.getItem("key");

3、删除某个数据：

localStorage.removeItem("key");

4、删除所有数据：

localStorage.clear();

登录代码：

submit() {
      axios({
        url:"http://api/user/login",
        method: "post",
        data: {
          username: this.username,
          password: Encrypt(this.password)
        },
        transformRequest: [
          function(data) {
            console.log(data.password);
            data = Qs.stringify(data);
            return data;
          }
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        dataType: "json"
      })
        .then(res => {
          // console.log(res)
          if (res.data.msg == "登录成功") {
            var ses = window.localStorage; 
            var id = JSON.stringify(res.data.detail);//将获取到的数据转换为json数据
            ses.setItem("data", id); //将id的内容存入data里
            this.$router.push("/my");//登录成功后跳转页面
            return true;
          } else {
            this.$notify({
              message: "用户名或密码错误！",
              color: "155,147,128",
              background: "rgb(237,232,104)"
            }); //提示信息（vant组件）
            return false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }

使用localStorage：

  methods: {
    out() {
      localStorage.clear();//清除页面所有localStorage，退出登录
      this.$router.push("/login");
    }
  },
  created: function() {
    if (!window.localStorage.data) {
      this.$router.push("/login");
    }
    
  },

一开始用的cookie保存登录状态，但是用HbuildX打包成APP是发现cookie无效，然后转用localStorages。后来搜了一下，发现一篇文章不知道可不可行还没试过 => Vue 保存cookie信息 ，用Vue开发完成后使用Hbuilder打包apk 保存登录信息到cookie中