vue中LocalStorage與SessionStorage的區(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了淺談Vuex狀態(tài)管理(全家桶)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在本篇文章里小編給大家分享的是一篇關(guān)于Vue—v-bind動態(tài)綁定class的知識點內(nèi)容，有需要的朋友們可以參考下。2020-01-01
表單元素挺多的，本文主要介紹了element的表單元素使用總結(jié)，主要包括文本框類、選擇類、其他類，有一定的參考價值，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了vue引用echarts餅圖不顯示圖例的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要給大家介紹了關(guān)于vue項目中使用vue-i18n報錯的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue在同一個頁面重復(fù)引用相同組件如何區(qū)分二者
這篇文章主要介紹了vue在同一個頁面重復(fù)引用相同組件如何區(qū)分二者，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
最近需要在項目中使用地圖顯示點位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue使用echarts定制特殊的儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
詳解Vue3.0 + TypeScript + Vite初體驗
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02