VUE如何使用localstorage和sessionstorage实现登录

今天小编给大家分享一下VUE如何使用localstorage和sessionstorage实现登录的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

localstroage就是一个加强版的COOKIE。

localstroage与sessionstroage是HTML5的新属性。使用的相对方便。浏览器支持也做的很好。

这里着重说一下IE，官方给的说法是IE8及以上的浏览器支持。

但是网上大多数的说法是IE8本身是不支持的，只有到了IE9才支持。

这个我没试，IE浏览器我早早的就放弃了。有兴趣，可以试一试。

说到他们二者，就不得不和Cookie对比一下了。

三者的异同

localStorage和sessionStorage操作

localStorage和sessionStorage操作方法都一样，我觉得，他俩是一个玩意。就是‘生命周期不一样’。

setItem存储value

用途：将value存储到key字段

sessionStorage.setItem("key", "value");    
localStorage.setItem("aaa", "111");
localStorage.name = "xuanyuan"

getItem获取value

用途：获取指定key本地存储的值

var value = sessionStorage.getItem("key");    
var site = localStorage.getItem("asd");

removeItem删除key

用途：删除指定key本地存储的值

sessionStorage.removeItem("key");    
localStorage.removeItem("asd");

clear清除所有的key/value

用途：清除所有的key/value

sessionStorage.clear();    
localStorage.clear();

其他操作方法：点 ‘.’ 操作和[ ]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

var storage = window.localStorage;
for(var i=0, len=storage.length; i<len;i++){
    var key = storage.key(i);    
    var value = storage.getItem(key);    
    console.log(key + "=" + value);
}

登录实例：

<template>
  <div class="bigdiv">
    <div class="twodiv">
      <div >
        <p><h3>登录</h3></p>
      </div>
      <div>
        <Input v-model="username" placeholder="账号" ></Input>
        <Input v-model="password" placeholder="密码"  type="password"></Input>
      </div> 
      <div>
        <Button type="info" @click="executelogin()" class="but">登录</Button>
      </div>
    </div>
  </div>
</template>
<script>
// 引入axios组件
import axios from "axios";
import qs from "qs"; //处理数据  qs.stringify(params)
import {checkRule} from '@/assets/js/public';//引入公共js文件
export default {
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods: {
    /**
     * 提交用户输入的登录信息
     */
executelogin() {
// 判断浏览器是否支持localstroage
if(!window.localStorage){
this.$Message.error(‘您的浏览器不支持localstorage');
          return false;
       }
      const self = this;//将this对象附到一个不可更改的变量中~
      axios({
          method: "post",
          url: "你的url",
          data: {username: this.username,password:this.password}
      })
      .then(function(response) {
          checkRule(response,self);//检查是否有权限
          if(response.data.status == 1){
         // 所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
            // 先存localStorage，再提示操作成功，然后跳路由
            // JSON.stringify:将对象转成字符串
            // JSON.parse():将字符串装换成对象
            let toll = JSON.stringify(response.data.toll);//将当前信息变成json字符串
            localStorage.toll = toll;//存储用户信息
            let nowtime = new Date().getTime();
            localStorage.logintime = nowtime;//存储登陆时间，判断登录是否过期
            self.$Message.success('登陆成功');
            self.$router.push({ 
                path:'/',    //这是路由名称     
            })
          }else{
            alert("用户名或密码错误");
          }
      })
      .catch(function(response) {
          // alert("请求失败");
      });
    },
  }
}
</script>

Router.js

// 全局路由守卫
router.beforeEach((to, from, next) => {//在路由跳转之前做的事
  var userinfo = '';
  // 这个是使用localstronge存储方式存储的方法
  let nowtime = new Date().getTime();//获取当前时间戳  毫秒
  let sessiontime = nowtime - localStorage.logintime//当前时间  -  登录时间
  console.log(sessiontime)
  // 数据保存时间只有5个小时，超过5个小时，清除
  if (sessiontime > 18000000){
    localStorage.clear();
  }
  // 这是取值
  let userinfo = localStorage.userinfo;
}

以上就是“VUE如何使用localstorage和sessionstorage实现登录”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。