瀏覽器的本地存儲主要分為、和, 其中又可以分為和。
最開始被設(shè)計出來其實并不是來做本地存儲的，而是為了彌補HTTP在狀態(tài)管理上的不足。
HTTP 協(xié)議是一個無狀態(tài)協(xié)議，客戶端向服務(wù)器發(fā)請求，服務(wù)器返回響應(yīng)，故事就這樣結(jié)束了，但是下次發(fā)請求如何讓服務(wù)端知道客戶端是誰呢？
這種背景下，就產(chǎn)生了 .
本質(zhì)上就是瀏覽器里面存儲的一個很小的文本文件，內(nèi)部以鍵值對的方式來存儲(在開發(fā)者面板的這一欄可以看到)。向同一個域名下發(fā)送請求，都會攜帶相同的 ，服務(wù)器拿到 進行解析，便能拿到客戶端的狀態(tài)。
的作用很好理解，就是用來做狀態(tài)存儲的，但它也是有諸多致命的缺陷的：
1.容量缺陷。 的體積上限只有4KB微信瀏覽器 本地存儲，只能用來存儲少量的信息。
2.性能缺陷。 緊跟域名，不管域名下面的某一個地址需不需要這個 ，請求都會攜帶上完整的微信瀏覽器 本地存儲，這樣隨著請求數(shù)的增多，其實會造成巨大的性能浪費的，因為請求攜帶了很多不必要的內(nèi)容。
3.安全缺陷。由于 以純文本的形式在瀏覽器和服務(wù)器中傳遞，很容易被非法用戶截獲，然后進行一系列的篡改，在 的有效期內(nèi)重新發(fā)送給服務(wù)器，這是相當危險的。另外，在為 false 的情況下， 信息能直接通過 JS 腳本來讀取。
和異同
有一點跟一樣，就是針對一個域名，即在同一個域名下，會存儲相同的一段。
不過它相對還是有相當多的區(qū)別的:
1.容量。 的容量上限為5M，相比于的 4K 大大增加。當然這個 5M 是針對一個域名的，因此對于一個域名是持久存儲的。
2.只存在客戶端，默認不參與與服務(wù)端的通信。這樣就很好地避免了 帶來的性能問題和安全問題。
3.接口封裝。通過暴露在全局，并通過它的 和 等方法進行操作，非常方便。
特點
以下方面和一致:
1.容量。容量上限也為 5M。
2.只存在客戶端，默認不參與與服務(wù)端的通信。
3.接口封裝。除了名字有所變化，存儲方式、操作方式均和一樣。
但和有一個本質(zhì)的區(qū)別，那就是前者只是會話級別的存儲，并不是持久化存儲。會話結(jié)束，也就是頁面關(guān)閉，這部分就不復(fù)存在了。
是運行在瀏覽器中的非關(guān)系型數(shù)據(jù)庫, 本質(zhì)上是數(shù)據(jù)庫，絕不是和剛才的 5M 一個量級，理論上這個容量是沒有上限的。
關(guān)于它的使用，本文側(cè)重原理，而且 MDN 上的教程文檔已經(jīng)非常詳盡，這里就不做贅述了，感興趣可以看一下使用文檔。
接著我們來分析一下的一些重要特性，除了擁有數(shù)據(jù)庫本身的特性，比如支持事務(wù)，存儲二進制數(shù)據(jù)，還有這樣一些特性需要格外注意：
1.鍵值對存儲。內(nèi)部采用對象倉庫存放數(shù)據(jù)，在這個對象倉庫中數(shù)據(jù)采用鍵值對的方式來存儲。
2.異步操作。數(shù)據(jù)庫的讀寫屬于 I/O 操作, 瀏覽器中對異步 I/O 提供了支持。
3.受同源策略限制，即無法訪問跨域的數(shù)據(jù)庫。
總結(jié)
瀏覽器中各種本地存儲和緩存技術(shù)的發(fā)展，給前端應(yīng)用帶來了大量的機會，PWA 也正是依托了這些優(yōu)秀的存儲方案才得以發(fā)展起來。重新梳理一下這些本地存儲方案:
并不適合存儲，而且存在非常多的缺陷。
Web 包括和, 默認不會參與和服務(wù)器的通信。
為運行在瀏覽器上的非關(guān)系型數(shù)據(jù)庫，為大型數(shù)據(jù)的存儲提供了接口。