VUE如何使用localstorage和sessionstorage實(shí)現(xiàn)登錄

今天小編給大家分享一下VUE如何使用localstorage和sessionstorage實(shí)現(xiàn)登錄的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

localstroage就是一個加強(qiáng)版的COOKIE。

localstroage與sessionstroage是HTML5的新屬性。使用的相對方便。瀏覽器支持也做的很好。

這里著重說一下IE，官方給的說法是IE8及以上的瀏覽器支持。

但是網(wǎng)上大多數(shù)的說法是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();

其他操作方法：點(diǎn) ‘.’ 操作和[ ]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通對象一樣用點(diǎn)(.)操作符，及[]的方式進(jìn)行數(shù)據(jù)存儲，像如下的代碼：

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

localStorage和sessionStorage的key和length屬性實(shí)現(xiàn)遍歷

sessionStorage和localStorage提供的key()和length可以方便的實(shí)現(xiàn)存儲的數(shù)據(jù)遍歷，例如下面的代碼：

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);
}

登錄實(shí)例：

<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"; //處理數(shù)據(jù)  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);//檢查是否有權(quán)限
          if(response.data.status == 1){
         // 所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們?nèi)粘１容^常見的JSON對象類型需要一些轉(zhuǎn)換
            // 先存localStorage，再提示操作成功，然后跳路由
            // JSON.stringify:將對象轉(zhuǎn)成字符串
            // JSON.parse():將字符串裝換成對象
            let toll = JSON.stringify(response.data.toll);//將當(dāng)前信息變成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

// 全局路由守衛(wèi)
router.beforeEach((to, from, next) => {//在路由跳轉(zhuǎn)之前做的事
  var userinfo = '';
  // 這個是使用localstronge存儲方式存儲的方法
  let nowtime = new Date().getTime();//獲取當(dāng)前時間戳  毫秒
  let sessiontime = nowtime - localStorage.logintime//當(dāng)前時間  -  登錄時間
  console.log(sessiontime)
  // 數(shù)據(jù)保存時間只有5個小時，超過5個小時，清除
  if (sessiontime > 18000000){
    localStorage.clear();
  }
  // 這是取值
  let userinfo = localStorage.userinfo;
}

以上就是“VUE如何使用localstorage和sessionstorage實(shí)現(xiàn)登錄”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。