引言

隨著對前端的瞭解越來越深入，瞭解到了很多種瀏覽器的儲存方案，如 Cookie、LocalStorage等，哪這些儲存方案有何異同，分別的適用場景又是什麼呢。

Cookie

Cookie的來源

Cookie 被創造出來的本意並不是本地儲存，而是為了辨別使用者身份。眾所周知，Http 協議是無狀態的，也就是說你每一次傳送給伺服器的請求對於伺服器來說都是孤立的，伺服器不知道這這些請求來自於誰。比如你向購物車裡面添加了一些商品，但是當傳送結賬請求的時候伺服器懵了，我怎麼知道你是誰，你買了什麼呢。而使用 Cookie 之後，伺服器就可以通過檢視 Cookie 來判斷髮送使用者，一定程度上 Cookies 可以說是請求的身份證。可以告訴伺服器請求傳送自誰。

Cookie是什麼

百聞不如一見，直www.cppcns.com接來看看 Cookie 長啥樣

這是百度首頁使用的 Cookie ，如你所見，Cookie 是以 Name-Value 鍵值對儲存在瀏覽器中的，其中 Value 又是明顯經過了加密的資料。

Cookie生成方式

Cookie 是所屬於域名的，還是百度首頁的 Cookie，通過 Domain 屬性可以得知前兩個 Cookie 是屬於 .baidu.com 的

每個域名只能設定與訪問到自己域名下的 Cookie，比如 baidu.com 無法訪問 Domain 為 sougou.com 的 Cookie。但是子域名可以讀取父域名設定的Cookie，比如截圖中 www.baidu.com 就讀取到了 Domain='.baidu.com' 的Cookie，通過手動設定 Domain 可以設定父域名的 Cookie，比如 www.baidu.com 可以設定Domain='bwww.cppcns.com

//www.baidu.com

document.cookie='age=20;domain=.baidu.com'

// 此時 所有二級域名可以直接讀取到這個 Cookie

Cookie的生成方式分為 伺服器端生成和瀏覽器端生成。

伺服器端-通過設定 http respoCqIrzPwNynse header中的set-cookie

我們程式設計客棧可以通過響應頭裡的 Set-Cookie 指定要儲存的 Cookie 值。當請求返回瀏覽器的時候瀏覽器就會按照 header 中的 set-cookie 值設定 Cookie。預設情況下，Domain 被設定為設定 Cookie 頁面的主機名，當然我們也可以手動設定 Domain 的值。

Set-Cookie: id=a3fWa;

瀏覽器端-js中可以通過document.cookie可以讀寫cookie，以鍵值對的形式展示

document.cookie="id=a3fWa"
document.cookie='age程式設計客棧=20;domain=.baidu.com'

Cookie的應用場景

既然 Cookie 的作用就是告訴伺服器請求來自於誰，那麼最主要的作用就是保持使用者登陸態（記住密碼），除此之外還可以記錄使用者瀏覽資料，進行廣告推送和前文提到的購物車等。

Cookie的缺點

缺點其實在前文中就很顯而易見了

不夠大

Cookie 會隨著每一次請求傳送，這就註定了 Cookie 必定會有嚴格的大小限制，每一個 Cookie 的大小被限制在了 4kb，值得注意的是 4kb 指的是一個 Name-Value 的大小，而並不是說這個域名可以設定的 Cookie 總大小隻有 4kb

效能缺陷

Cookie 是跟隨著域名的，會隨著每一個同域名請求傳送，但是其實很大一部分請求，比如說圖片等靜態資源的請求是完全用不著 Cookie 的，雖然每個Cookie只有 4kb 但是積少成多也會帶來巨大的資源浪費。

我們可以把靜態資源放到 CDN 上去，這時候圖片域名就和主站域名不相同了，就不會附帶傳送 Cookie

不夠安全

正如上文直接開啟控制檯就可以看到 Cookie 一樣，Cookie 雖然通過編碼進行了加密，但在 Http 傳輸中是明文傳輸，指令碼也可以很輕鬆的獲取到 Cookie，非常容易被破解。

在伺服器端設定 Cookie 的時候附帶上 HttpOnly 標記，這樣在瀏覽器端就無法使用 document.cookie 訪問到這個 Cookie 了

Set-Cookie: id=a3fWa; HttpOnly

標記為 Secure 的 Cookie 只應通過 Https 協議加密過的請求傳送，但是即便如此也不應該使用 Cookie 儲存敏感資訊，因為 Cookie 有其固有的不安全性，這兩個標記也無法提供確切的安全保障。

解決方法

既然 Cookie 有這麼多缺點，有沒有什麼一勞永逸的解決方法呢，那就是「專業的人做專業的事」。

使用者登入態和部分使用者資訊的儲存的工作交給 Seesion ---即 Cookie 只用來儲存一個使用者唯一識別符號，真正資訊儲存在伺服器端，使用 Cookie 作為 SeesionID 去伺服器查詢資訊，這樣一來 Cookie 的容量限制，安全問題都引刃而解了，因為此時 Cookie 裡面就是一串無意義的隨機碼。

本地儲存得工作交由html5 中新增本地儲存的解決方案「Web Storage」，它又分成兩類 ：localStorage和SessionStorage，接下來就介紹這兩兄弟。

LocalStorage

特點

• 資料長時間儲存，直到手動刪除為止
• 大小約為 5M
• 和 Cookie 一樣，一個網站只能訪問和操作自己網站域名下的資料
• 僅在客戶端使用，和服務端無通訊
• 介面封裝較好
• 使用鍵值對儲存資訊
• 同源視窗都可以訪問

使用示例

LocalStorage 使用非常方便：

// 設定資料
localStorage.setItem("key","value");
//讀取資料
let valueLocal = localStorage.getItem("key");

使用場景

通過上面那些特性就可以看出 LocalStorage 非常適合用來做本地快取，可以提高首屏載入速度。一些圖片等不會經常改變的大資源也可以快取下來，減少網路請求。

SeesionStorage

特點

• 儲存時間為本次會話，也就是說視窗關閉就沒了
• 僅本視窗可以訪問，同源的其他視窗都不行大
• 小約為 5M

使用場景

sessionStorage 更適合用來儲存生命週期和它同步的會話級別的資訊。這些資訊只適用於當前會話，比如可以用來做表單資料的持久化，防止重新整理後表單資料丟失

Cookie、LocalStorage 和SessionStorage 之間的區別

作用域的不同

這三者都遵循協議，即同協議，同域名，同埠下才能訪問和修改同一份資料，唯一不同的就是 SeesionStorage 還要求在同一視窗。

生命週期的不同

• Cookie可以手動設定過期時間，預設就是本次會話時長，隨著視窗關閉而刪除，當設定了過期時間時候，就會被儲存到硬碟中直到過期時間才被刪除
• LocalStorage是持久化的本地儲存，除非你手動刪除，否則會一直存在
• SessionStorage是會話級別的儲存，也是隨著視窗關閉而刪除。

總結

這就是幾種瀏覽器儲存方案，當然還有我們應該根據不同方案各自的特點決定什麼時候使用什麼方案，適合的才是最好的。總結一下本文的幾個重點

• Cookie 的本職工作並非本地儲存，而是“維持狀態”
• Web Storage 是html5 專門為瀏覽器儲存而提供的資料儲存機制，不與服務端發生通訊

以上就是詳解JS瀏覽器儲存的詳細內容，更多關於JS瀏覽器儲存的資料請關注我們其它相關文章！