欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解

 更新時間:2022年08月11日 09:14:37   作者:camellia  
這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實現(xiàn)登錄示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

正文

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

當(dāng)時也不知道是咋想的,就認(rèn)為php給VUE提供接口,可能session就不起作用了(現(xiàn)在的登錄是用SESSION做的)。

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

localstroage就是一個加強版的COOKIE。

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

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

但是網(wǎng)上大多數(shù)的說法是IE8本身是不支持的,只有到了IE9才支持。

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

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

三者的異同

特性CookielocalStoragesessionStorage
數(shù)據(jù)的生命期一般由服務(wù)器生成,可設(shè)置失效時間。如果在瀏覽器端生成Cookie,默認(rèn)是關(guān)閉瀏覽器后失效除非被清除,否則永久保存,可變相設(shè)置失效時間。僅在當(dāng)前會話下有效,關(guān)閉頁面或瀏覽器后被清除
存放數(shù)據(jù)大小4K左右一般為5MB 
與服務(wù)器端通信每次都會攜帶在HTTP頭中,如果使用cookie保存過多數(shù)據(jù)會帶來性能問題僅在客戶端(即瀏覽器)中保存,不參與和服務(wù)器的通信 
易用性需要程序員自己封裝,源生的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();    
localStorage.clear();

其他操作方法:點 ‘.’ 操作和[ ]

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

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

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

sessionStorage和localStorage提供的key()和length可以方便的實現(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);
}

登錄實例:

<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"; //處理數(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)粘1容^常見的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;
}

以上示例是我博客后臺管理系統(tǒng)登錄所使用的登錄存儲登錄數(shù)據(jù)的方法,更多關(guān)于VUE實現(xiàn)登錄的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue3 watch和watchEffect的使用以及有哪些區(qū)別

    vue3 watch和watchEffect的使用以及有哪些區(qū)別

    這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下
    2021-01-01
  • vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案

    vue項目使用lodash節(jié)流防抖函數(shù)問題解決方案

    在lodash函數(shù)工具庫中,防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用,這篇文章主要介紹了vue項目使用lodash節(jié)流防抖函數(shù)問題與解決,需要的朋友可以參考下
    2023-10-10
  • 五分鐘帶你快速了解vue的常用實例方法

    五分鐘帶你快速了解vue的常用實例方法

    最近項目中又使用了vue,所以來給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue的常用實例方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • Vue實現(xiàn)仿iPhone懸浮球的示例代碼

    Vue實現(xiàn)仿iPhone懸浮球的示例代碼

    這篇文章主要介紹了Vue實現(xiàn)仿iPhone懸浮球的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • Vue Element UI + OSS實現(xiàn)上傳文件功能

    Vue Element UI + OSS實現(xiàn)上傳文件功能

    這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實現(xiàn)上傳文件功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07
  • Vue?Router組合布局用法詳解

    Vue?Router組合布局用法詳解

    今天我們用一種新的布局方式,使用路由視圖來實現(xiàn)布局樣式,本文將給大家介紹如何使用Vue?Router組合布局,文中有詳細(xì)的代碼示例供大家參考,感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)
    2023-05-05
  • vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯解決

    vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯解決

    這篇文章主要介紹了vue-cli3.0修改打包后的文件名和文件地址,打包后本地運行報錯的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳解Vue源碼中一些util函數(shù)

    詳解Vue源碼中一些util函數(shù)

    這篇文章主要介紹了Vue源碼中一些util函數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • Vue中如何獲取json文件中的數(shù)據(jù)

    Vue中如何獲取json文件中的數(shù)據(jù)

    訪問百度音樂API需要傳遞音樂類型參數(shù),而這些參數(shù)是存在musictype.json中,現(xiàn)在在組件listcate.vue需要獲取json數(shù)據(jù),如何實現(xiàn)呢,下面小編給大家?guī)砹薞ue中如何獲取json文件中的數(shù)據(jù),感興趣的朋友一起看看吧
    2022-09-09
  • webStorm?debug?vue項目的兩種方案圖文詳解

    webStorm?debug?vue項目的兩種方案圖文詳解

    WebStorm作為一款功能強大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項目的兩種方案,需要的朋友可以參考下
    2024-07-07

最新評論