VUE使用localstorage和sessionstorage實現登錄示例詳解

更新時間：2022年08月11日 09:14:37 作者：camellia

這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實現登錄示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

今天這篇日志記錄下做VUE登錄的血淚史（VUE2）。

當時也不知道是咋想的，就認為php給VUE提供接口，可能session就不起作用了（現在的登錄是用SESSION做的）。

可是登錄需要做呀，用什么存儲登錄的用戶信息呢。最開始我還真想過用COOKIE，但是安全性得不到保證，因為在每次HTTP請求的時候，都會把cookie中存儲的數據攜帶在請求中。其實localstroage也不見得安全到那里去，可是總覺得新東西能好一點。

localstroage就是一個加強版的COOKIE。

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

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

但是網上大多數的說法是IE8本身是不支持的，只有到了IE9才支持。

這個我沒試，IE瀏覽器我早早的就放棄了。有興趣，可以試一試。

說到他們二者，就不得不和Cookie對比一下了。

三者的異同

特性	Cookie	localStorage	sessionStorage
數據的生命期	一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效	除非被清除，否則永久保存，可變相設置失效時間。	僅在當前會話下有效，關閉頁面或瀏覽器后被清除
存放數據大小	4K左右	一般為5MB
與服務器端通信	每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信
易用性	需要程序員自己封裝，源生的Cookie接口不友好	源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持

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();&nbsp;&nbsp;&nbsp;&nbsp;
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><h2>登錄</h2></p>
      </div>
      <div>
        <Input v-model="username" placeholder="賬號" style="width: 300px"></Input>
        <Input v-model="password" placeholder="密碼" style="width: 300px" 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

// 全局路由守衛(wèi)
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實現登錄的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: