一 概述
Local Storage，Session Storage，IndexedDB，Web SQL，Cookies都是瀏覽器中具有實現前端本地存儲功能的介質。在HTML5本地存儲——Web SQL Database提到過Web SQL Database實際上已經被廢棄，而HTML5的支持的本地存儲實際上變成了Web Storage（Local Storage和Session Storage）與IndexedDB。Web Storage使用簡單字符串鍵值對在本地存儲數據，方便靈活，但是對於大量結構化數據存儲比較難處理，IndexedDB是爲了能夠在客戶端存儲大量的結構化數據，並且使用索引高效檢索的API。
二 Cookie
Cookie數據始終在同源的Http請求中攜帶（即使不需要），在HttpRequest和HttpResponse的Header中實現瀏覽器和服務器間來回傳遞，最後保存在客戶端，這樣需要佔用一些流量，同時Cookie數據還有path屬性，可以限制Cookie只屬於該路徑下，且Cookie大小不能超過4k，所以Cookie只是適合保存較小的數據，如回話標識，用戶登錄信息，網站記住密碼的功能通常是通過在Cookie中保存一段辨別用戶身份的數據來實現。值得注意的是由於Cookie在Http協議請求中是以明文方式傳遞的（Https協議請求中不是），所以存在一定的安全性問題。此外Cookie只在設置的過期時間之前有效，即使窗口或者瀏覽器關閉，此外在所有同源的瀏覽器窗口可以實現Cookie的共享。
三 Local Storage&Session Storage
Local Storage與Session Storage是Web Storage提供的兩種API，是HTML5中新增的本地同源存儲解決方案之一，都是一種前端客戶端本地存儲慨念。
Local Storage是可以永久保存在瀏覽器本地，即使瀏覽器窗口或者瀏覽器關閉也不會被清除，除非顯式的清除，所以用作客戶端持久化數據，同時數據可以在所有同源窗口進行共享。其中數據不參與和服務器之間的通信，一般可以保存5M大小的數據。
Session Storage是會話級別的存儲，用於本地存儲會話（session）數據，且存儲的數據只是在當前瀏覽器窗口的同一個會話頁面有效，會話結束後數據也會隨之銷燬，所以不能進行持久化存儲，且數據不會在瀏覽器窗口進行共享，即使是不同窗口的相同頁面。其中數據不參與和服務器之間的通信，一般可以保存5M大小的數據。
四 Cookie&Local Storage&Session Storage之間比較
| 特性 | Cookie | Local Storage | Session Storage |
|---|---|---|---|
| 數據的生命期 | 可設置失效時間，默認是關閉瀏覽器後失效 | 除非被顯式清除，否則永久保存 | 會話級存儲，僅在當前會話下有效，會話結束，關閉頁面或瀏覽器後被清除 |
| 存放數據大小 | 4KB左右 | 5MB~10MB(瀏覽器不同，情況不同) | 5MB~10MB(瀏覽器不同，情況不同) |
| 與服務器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能和安全問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 | 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 |
| 易用性 | 源生的Cookie接口不友好，開發者需要根據需求封裝 | 源生接口良好，亦可再次封裝來對Object和Array有更好的支持 | 源生接口良好，亦可再次封裝來對Object和Array有更好的支持 |
| 應用場景 | 用戶登錄時，保存服務器返回的一段加密過的唯一辨識單一用戶的code，用以判斷當前用戶登錄狀態，或者之前電商網站用來保存用戶的購物車信息。 | Local Storage可以替代Cookie完成用戶購物車信息的前端保存功能，同時可以當作HTML5遊戲的本地數據的存儲空間。 | 當頁面存在多表單的情況下，可以利用Session Storage實現表單頁拆分，優化用戶體驗。 |
| 注意 | 不要將系統敏感的數據保存到Cookie，Local Storage，Session Storage中，防止XSS注入的風險。因爲XSS注入可以通過控制檯對你的屬性值進行修改。 | ||
五 IndexedDB
如Cookies，Local Storage，Session Storage都是瀏覽器端的數據存儲方案，但是不適合大量數據的存儲，而且不提供搜索功能，不能建立自定的索引。而IndexedDB就是瀏覽器提供的本地數據庫，它可以被網頁腳本創建和操作。它可以存儲大量數據，提供了查找接口，能夠建立索引。但是不屬於關係型數據庫（不支持SQL查詢語句，更類似於NoSQL數據庫）。
IndexedDB的特點：
- 鍵值對存儲：IndexedDB內部採用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括JavaScript對象。對象倉庫中，數據以“鍵值對”的形式保存。每一個數據記錄都有對應的主鍵，主鍵是唯一的，如果重複會拋出一個錯誤。
- 異步：IndexedDB操作不會鎖死瀏覽器，用戶依然可以進行其他操作，與Local Storage的同步操作不同，異步的設計是爲了大量數據的讀寫，拖慢頁面的表現，降低用戶體驗。
- 支持事務：IndexedDB支持事務（transaction）,這意味着一些列操作步驟中，只要有某個步驟出現異常，則整個事務就會消失，數據庫回滾到事務發生之前的狀態，不存在只寫一部分數據的情況。
- 同源限制：IndexedDB受到同源限制，每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫，而不能夠訪問跨域的IndexedDB數據庫。
- 存儲空間大：IndexedDB的存儲空間一般不少於250MB，或者更大。
- 支持二進制存儲：IndexedDB不僅可以儲存字符串，還可以儲存二進制數據（ArrayBuffer對象和Blob對象）。
參考資料：瀏覽器數據庫IndexedDB入門教程