vue中LocalStorage與SessionStorage的區別與用法

Posted on by

前面把後臺的驗證機制梳理瞭一下，主要是Cookie、Session和Token的使用，Django：Cookie設置及跨域問題處理、Django實：Cookie搭配Session使用、Django：基於Token的驗證使用，當然這並不表示Token是最優的，還是需要根據項目需求來選擇的，也可以混合搭配使用。

今天要做的事將後臺發送過來的Token存儲到客戶端中，這裡可以存Cookie、LocalStorage、SessionStorage等地方，Cookie前面已經介紹過瞭這裡直接忽略，我們主要說說LocalStorage和SessionStorage。

什麼是LocalStorage

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

什麼是SessionStorage

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

LocalStorage與SessionStorage的區別

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

LocalStorage與SessionStorage的特點

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

2.LocalStorage和SessionStorage可以使用統一的API接口。

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

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

https://img1.sycdn.imooc.com/5bab321d0001972206300152.jpg

LocalStorage與SessionStorage的用法

因為LocalStorage與SessionStorage的應用一致，這裡就不多做解釋瞭，以LocalStorage為例。

LocalStorage提供瞭5個方法，分別是clear（清除LocalStorage）、getItem（獲取本地數據）、key（取下標對應鍵的值）、removeItem（刪除以保存數據）、setItem（設置保存數據）。

 下面是具體的使用方法和說明，直接用localStorage.就可以帶出來對應的方法，我們隻要理解其對應的應用屬性就可以使用瞭。

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

LocalStorage與SessionStorage應用實例

下面是我實際開發中的應用，前面我通過JsonResponse向前端發送瞭JSON數據，裡面包含瞭data（用戶請求的數據）、token（服務器生成的token）和code（後臺處理的狀態碼），前端收到這些數據後對數據進行處理，判斷code返回是否成功，如果成功我們就解析數據並將數據存入本地，否則則訪問失敗。

這裡我用 localStorage和sessionStorage分別存瞭兩個數據，localStorage是自定義的，sessionStorage是從後臺獲取的，打開瀏覽器開發者工具，在Application中我們可以在Storage下面的localStorage和sessionStorage分別找到我們存儲的對應值。

到此這篇關於vue中LocalStorage與SessionStorage的區別與用法的文章就介紹到這瞭,更多相關vue LocalStorage與SessionStorage內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：