快捷導(dǎo)航

vue中LocalStorage與SessionStorage的區(qū)別與用法

更新時間：2021年09月18日 11:54:07 作者：ProgramNotes

本文主要介紹了LocalStorage和SessionStorage。LocalStorage和SessionStorage是兩種存儲方式，本文詳細(xì)的介紹一下區(qū)別以及用法，感興趣的可以了解一下

前面把后臺的驗證機(jī)制梳理了一下，主要是Cookie、Session和Token的使用，Django：Cookie設(shè)置及跨域問題處理、Django實：Cookie搭配Session使用、Django：基于Token的驗證使用，當(dāng)然這并不表示Token是最優(yōu)的，還是需要根據(jù)項目需求來選擇的，也可以混合搭配使用。

今天要做的事將后臺發(fā)送過來的Token存儲到客戶端中，這里可以存Cookie、LocalStorage、SessionStorage等地方，Cookie前面已經(jīng)介紹過了這里直接忽略，我們主要說說LocalStorage和SessionStorage。

什么是LocalStorage

LocalStorage譯為“本地存儲器”，是HTML5中新增的一個存儲對象，跟Cookie一樣也是用來本地存儲來的，但是解決了Cookie存儲空間不足的問題(cookie每條存儲空間為4k)，而localStorage瀏覽器一般支持5M，通常以鍵/值對形式的字符串進(jìn)行存儲。

什么是SessionStorage

SessionStorage譯為“會話存儲”，也是HTML5新增的一個存儲對象，用于本地臨時存儲同一窗口的數(shù)據(jù)，在關(guān)閉窗口之后將會刪除這些數(shù)據(jù)，SessionStorage瀏覽器一般支持5M，通常以鍵/值對形式的字符串進(jìn)行存儲。

LocalStorage與SessionStorage的區(qū)別

LocalStorage生命周期是永久,除非主動清除LocalStorage信息，否則這些信息將一直存放在客戶端。而SessionStorage生命周期是臨時，僅在當(dāng)前會話窗口有效，關(guān)閉頁面或瀏覽器數(shù)據(jù)就會自動被清除。

LocalStorage與SessionStorage的特點

1.不同瀏覽器之間無法共享LocalStorage或SessionStorage中的數(shù)據(jù)。

2.LocalStorage和SessionStorage可以使用統(tǒng)一的API接口。

3.LocalStorage或SessionStorage通常以鍵/值對形式的字符串進(jìn)行存儲，所以在存儲時需要對數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換，使用JSON.stringify方法將對象轉(zhuǎn)換成字符串，提取時用JSON.parse方法將字符串轉(zhuǎn)換成對象。

4.LocalStorage或SessionStorage是HTML5的新屬性，所以需要較新的瀏覽器才支持。

LocalStorage與SessionStorage的用法

因為LocalStorage與SessionStorage的應(yīng)用一致，這里就不多做解釋了，以LocalStorage為例。

LocalStorage提供了5個方法，分別是clear（清除LocalStorage）、getItem（獲取本地數(shù)據(jù)）、key（取下標(biāo)對應(yīng)鍵的值）、removeItem（刪除以保存數(shù)據(jù)）、setItem（設(shè)置保存數(shù)據(jù)）。

下面是具體的使用方法和說明，直接用localStorage.就可以帶出來對應(yīng)的方法，我們只要理解其對應(yīng)的應(yīng)用屬性就可以使用了。

這樣我們就可以使用localStorage.setItem('鍵','值')將服務(wù)器傳過來的數(shù)據(jù)存入客戶端本地，存儲前記得將數(shù)據(jù)進(jìn)行轉(zhuǎn)換。

LocalStorage與SessionStorage應(yīng)用實例

下面是我實際開發(fā)中的應(yīng)用，前面我通過JsonResponse向前端發(fā)送了JSON數(shù)據(jù)，里面包含了data（用戶請求的數(shù)據(jù)）、token（服務(wù)器生成的token）和code（后臺處理的狀態(tài)碼），前端收到這些數(shù)據(jù)后對數(shù)據(jù)進(jìn)行處理，判斷code返回是否成功，如果成功我們就解析數(shù)據(jù)并將數(shù)據(jù)存入本地，否則則訪問失敗。

這里我用 localStorage和sessionStorage分別存了兩個數(shù)據(jù)，localStorage是自定義的，sessionStorage是從后臺獲取的，打開瀏覽器開發(fā)者工具，在Application中我們可以在Storage下面的localStorage和sessionStorage分別找到我們存儲的對應(yīng)值。

到此這篇關(guān)于vue中LocalStorage與SessionStorage的區(qū)別與用法的文章就介紹到這了,更多相關(guān)vue LocalStorage與SessionStorage內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: