很多時候我們在做前端開發的過程中需要緩存一些數據到我們客戶端。那么就需要了解一下storage方面的知識了。本文將介紹幾種不同的緩存方式。

文章目錄

• 查看有哪些存儲方式。
• 一、Local Storage
• • 特點：
  • 使用方法：
• 二、Session Storage
• • 特點：
  • 使用方法和localStorage一樣
  • localStorage與sessionStorage的注意點：
• 三、Cookie
• • 特點：
  • 弊端：
  • 使用方法：
  • 測試cookie是否被客戶端禁用了：
• 四、安全方面的考慮
• 五、三者的應用場景
• 六、額外內容
• • 測試storage的容量上限
  • 獲取storage的已使用大小
  • 剩余容量那就用上面倆個的結果相減即可得出

查看有哪些存儲方式。

打開我們的控制臺 -> Application
我們先來介紹三個我們經常用的：

一、Local Storage

特點：

只有客戶端可以訪問

本地永久存儲，除非用戶從瀏覽器清除或者使用javascript代碼清除，否者不會消失

每個域可以最多存儲5MB【個人測試我的chrome版本80.0.3987.132（正式版本）可以存儲5MB的數據也就是5200000個字節的長度】

使用方法：

// 保存數據到 sessionStorage localStorage.setItem('key', 'value'); // 如果要傳遞object或者array之類的話請使用JSON.stringify localStorage.setItem('key', JSON.stringify({a: 'xx'})) localStorage.setItem('key', JSON.stringify([1, 2, 3]))// 從 sessionStorage 獲取數據 const data = localStorage.getItem('key'); // 解析obj，arr之類的數據 const objData = JSON.parse(localStorage.getItem('key'));// 從 sessionStorage 刪除保存的數據 localStorage.removeItem('key');// 從 sessionStorage 刪除所有保存的數據 localStorage.clear();

二、Session Storage

特點：

只有客戶端可以訪問

本地臨時存儲，在頁面會話結束時會被清除。

存儲大小與localStorage相同

在當前網站通過a標簽新開一個窗口，另外的窗口共享session storage【必須是同源的才會共享(協議域名端口一致)】

使用方法和localStorage一樣

localStorage與sessionStorage的注意點：

應注意，無論數據存儲在 localStorage 還是 sessionStorage ，它們都特定于頁面的協議。

三、Cookie

特點：

服務端和客戶端都可以訪問

存儲的是文本數據，是文本明文的格式

可以設置有效期，過期后將會自動刪除。如果不設置則是關閉瀏覽器后失效

存儲容量最大為4KB

有存儲個數限制。每個瀏覽器限制不一樣。建議20個以內。最多的瀏覽器可以支持50個。

弊端：

上方的特點4與特點5都應該算是他的弊端。

cookie每次訪問頁面都會發出一次請求，消耗性能

如果用戶端禁用了coojie就會存不進去了【如果系統需要使用請在初始頁面進行判斷用戶端是否禁用了，禁用了給出提示】

安全性問題。如果cookie被別人攔截了，那人就可以取得所有的session信息。即使加密也于事無補，因為攔截者并不需要知道cookie的意義，它只要原樣轉發cookie就可以達到目的。

使用方法：

保存：

document.cookie = 'key=value;expires=xx;path=yy;domain=zz;secure'; //key --cookie名 //value --cookie值 //expires --過期時間（失效時間），可選，當不選時，在會話結束失效 //path --路徑，可選，不選時，和當前資源路徑保持一致 //domain --域，可選 //secure --安全鏈接，可選

修改：
同路徑下同名cookie覆蓋保存
刪除：
同路徑下同名cookie覆蓋保存，將失效時間設置為當前時間之前
查詢：

document.cookie //返回當前域下所有的cookie。以";"連接成的字符串

測試cookie是否被客戶端禁用了：

function CookieEnable() {let result = false;if (navigator.cookiesEnabled) return true;document.cookie = "testcookie=yes;";let cookieSet = document.cookie;if (cookieSet.indexOf("testcookie=yes") > -1) result=true;document.cookie = "";return result; } if(!CookieEnable()){alert("對不起，您的瀏覽器的Cookie功能被禁用，請開啟"); }

四、安全方面的考慮

我們需要了解，并不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 當中的。當我們使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺，別人就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 storage 肆意妄為。所以千萬不要用它們存儲敏感數據。

五、三者的應用場景

因為考慮到每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~

而另一方面 localStorage 適合存儲那些基本上不會變化的數據，比如某個版本的信息內容。換一次版本更改一次【這個判斷可以和后端商量著做】。

sessionStorage適合存儲臨時的緩存數據，比如各個頁面間的輸入輸出內容緩存之類的。

六、額外內容

測試storage的容量上限

測試瀏覽器存儲上限的鏈接：https://arty.name/localstorage.html
當然我們也可以自己寫代碼測試：

(function() {if(!window.localStorage) {console.log('當前瀏覽器不支持localStorage!')} let test = '0123456789';const add = function(num) {num += num;if(num.length == 10240) {test = num;return;}add(num);}add(test);let sum = test;const show = setInterval(function(){sum += test;try {localStorage.removeItem('test');localStorage.setItem('test', sum);console.log(sum.length / 1024 + 'KB');} catch(e) {console.log(sum.length / 1024 + 'KB超出最大限制');clearInterval(show);}}, 0.1)})()

直接扔到控制臺執行即可。

稍等一段時間后我們就發現結果已經出來了：【倆分鐘之內】

上面的是測試localStorage。sessionStorage同理也是這么測試，改一下即可：

(function() {if(!window.sessionStorage) {console.log('當前瀏覽器不支持sessionStorage!')} let test = '0123456789';const add = function(num) {num += num;if(num.length == 10240) {test = num;return;}add(num);}add(test);let sum = test;const show = setInterval(function(){sum += test;try {sessionStorage.removeItem('test');sessionStorage.setItem('test', sum);console.log(sum.length / 1024 + 'KB');} catch(e) {console.log(sum.length / 1024 + 'KB超出最大限制');clearInterval(show);}}, 0.1)})()

獲取storage的已使用大小

這是localStorage的，sessionStorage的請自行更改代碼。

(function(){if(!window.localStorage) {console.log('瀏覽器不支持localStorage');}var size = 0;for(item in window.localStorage) {if(window.localStorage.hasOwnProperty(item)) {size += window.localStorage.getItem(item).length;}}console.log('當前localStorage已使用容量為' + (size / 1024).toFixed(2) + 'KB'); })()

剩余容量那就用上面倆個的結果相減即可得出

總結

以上是生活随笔為你收集整理的客户端存储方法介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。