瀏覽器的本地儲存

瀏覽器的本地儲存主要分為cookie、webstorage和indexeddb, 其中webstorage又可以分為localstorage和sessionstorage。

cookie1.容量缺陷。cookie 的體積上限只有4kb，只能用來儲存少量的資訊。

2.效能缺陷。cookie 緊跟網域名稱，不管網域名稱下面的某乙個位址需不需要這個 cookie ，請求都會攜帶上完整的 cookie，這樣隨著請求數的增多，其實會造成巨大的效能浪費的，因為請求攜帶了很多不必要的內容。

3.安全缺陷。由於 cookie 以純文字的形式在瀏覽器和伺服器中傳遞，很容易被非法使用者截獲，然後進行一系列的篡改，在 cookie 的有效期內重新傳送給伺服器，這是相當危險的。另外，在httponly為 false 的情況下，cookie 資訊能直接通過 js 指令碼來讀取。

localstorage

和cookie異同

localstorage有一點跟cookie一樣，就是針對乙個網域名稱，即在同乙個網域名稱下，會儲存相同的一段localstorage。

不過它相對cookie還是有相當多的區別的:

1.容量。localstorage 的容量上限為5m，相比於cookie的 4k 大大增加。當然這個 5m 是針對乙個網域名稱的，因此對於乙個網域名稱是持久儲存的。

2.只存在客戶端，預設不參與與服務端的通訊。這樣就很好地避免了 cookie 帶來的效能問題和安全問題。

3.介面封裝。通過localstorage暴露在全域性，並通過它的 setitem 和 getitem等方法進行操作，非常方便。

sessionstorage

特點sessionstorage以下方面和localstorage一致:

1.容量。容量上限也為 5m。

2.只存在客戶端，預設不參與與服務端的通訊。

3.介面封裝。除了sessionstorage名字有所變化，儲存方式、操作方式均和localstorage一樣。

但sessionstorage和localstorage有乙個本質的區別，那就是前者只是會話級別的儲存，並不是持久化儲存。會話結束，也就是頁面關閉，這部分sessionstorage就不復存在了。

indexeddb

indexeddb是執行在瀏覽器中的非關係型資料庫, 本質上是資料庫，絕不是和剛才webstorage的 5m 乙個量級，理論上這個容量是沒有上限的。

關於它的使用，本文側重原理，而且 mdn 上的教程文件已經非常詳盡，這裡就不做贅述了，感興趣可以看一下使用文件。

接著我們來分析一下indexeddb的一些重要特性，除了擁有資料庫本身的特性，比如支援事務，儲存二進位制資料，還有這樣一些特性需要格外注意：

1.鍵值對儲存。內部採用物件倉庫存放資料，在這個物件倉庫中資料採用鍵值對的方式來儲存。

2.非同步操作。資料庫的讀寫屬於 i/o 操作, 瀏覽器中對非同步 i/o 提供了支援。

3.受同源策略限制，即無法訪問跨域的資料庫。

總結

瀏覽器中各種本地儲存和快取技術的發展，給前端應用帶來了大量的機會，pwa 也正是依託了這些優秀的儲存方案才得以發展起來。重新梳理一下這些本地儲存方案:

cookie並不適合儲存，而且存在非常多的缺陷。

web storage包括localstorage和sessionstorage, 預設不會參與和伺服器的通訊。

indexeddb為執行在瀏覽器上的非關係型資料庫，為大型資料的儲存提供了介面。