快捷導(dǎo)航

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

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

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

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

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

什么是LocalStorage

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

什么是SessionStorage

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

LocalStorage與SessionStorage的區(qū)別

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

LocalStorage與SessionStorage的特點(diǎn)

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

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

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

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

LocalStorage與SessionStorage的用法

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

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

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

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

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

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

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

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

您可能感興趣的文章: