前言
後端常用數據庫做數據存儲，譬如MySql、MongoDB，緩存技術存儲數據，如Redis、Memcached；
前端存儲數據目前常用的是Cookie、Storage、IndexedDB
Cookie
HTTP Cookie（也叫Web Cookie或瀏覽器Cookie）是服務器發送到用戶瀏覽器並保存在本地的一小塊數據，它會在瀏覽器下次向同一服務器再發起請求時被攜帶併發送到服務器上。通常，它用於告知服務端兩個請求是否來自同一瀏覽器，如保持用戶的登錄狀態。Cookie使基於無狀態的HTTP協議記錄穩定的狀態信息成爲了可能。
分類
Cookie總是保存在客戶端中（早期Java中經常會將Cookie與Session作爲存儲技術進行比較，Session是將數據保存在服務器端，大量的數據存儲會增加服務器的負擔），按在客戶端中的存儲位置，可分爲內存Cookie和硬盤Cookie。
內存Cookie由瀏覽器維護，保存在內存中，瀏覽器關閉後就消失了，其存在時間是短暫的。硬盤Cookie保存在硬盤裏，有一個過期時間，除非用戶手工清理或到了過期時間，硬盤Cookie不會被刪除，其存在時間是長期的。所以，按存在時間，可分爲非持久Cookie和持久Cookie。
創建Cookie
Set-Cookie響應頭部和Cookie請求頭部節
服務器使用Set-Cookie響應頭部向用戶代理（一般是瀏覽器）發送Cookie信息。一個簡單的Cookie可能像這樣：Set-Cookie: <cookie名>=<cookie值>
服務器通過該頭部告知客戶端保存Cookie信息
瀏覽器環境下獲取非HttpOnly標記的 cookie
var cookies = document.cookie;
Cookie的缺點
Cookie會被附加在每個HTTP請求中，所以無形中增加了流量。由於在HTTP請求中的Cookie是明文傳遞的，所以安全性成問題，除非用HTTPS。
Cookie的大小限制在4KB左右，對於複雜的存儲需求來說是不夠用的。
Cookie的簡單封裝
設置Cookie時一般會將路徑和過期時間一併設置，注意過期時間需要轉換成GMT或者UTC
代碼
測試結果
Storage
作爲 Web Storage API 的接口，Storage 提供了訪問特定域名下的會話存儲（session storage）或本地存儲（local storage）的功能，例如，可以添加、修改或刪除存儲的數據項。
如果你想要操作一個域名的會話存儲（session storage），可以使用 window.sessionStorage如果想要操作一個域名的本地存儲（local storage），可以使用 window.localStorage。
sessionStorage和localStorage的用法是一樣的，區別在於sessionStorage會在會話關閉也就是瀏覽器關閉時失效，而localStorage是將數據存儲在本地，不受關閉瀏覽器影響，除非手動清除數據
相關的api大家可以參考
developer.mozilla.org/zh-CN/docs/…
代碼
測試結果
IndexedDB
隨着瀏覽器的功能不斷增強，越來越多的網站開始考慮，將大量數據儲存在客戶端，這樣可以減少從服務器獲取數據，直接從本地獲取數據。
現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小不超過 4KB，且每次請求都會發送回服務器；LocalStorage 在 2.5MB 到 10MB 之間（各家瀏覽器不同），而且不提供搜索功能，不能建立自定義的索引。所以，需要一種新的解決方案，這就是 IndexedDB 誕生的背景。
通俗地說，IndexedDB 就是瀏覽器提供的本地數據庫，它可以被網頁腳本創建和操作。IndexedDB 允許儲存大量數據，提供查找接口，還能建立索引。這些都是 LocalStorage 所不具備的。就數據庫類型而言，IndexedDB 不屬於關係型數據庫（不支持 SQL 查詢語句），更接近 NoSQL 數據庫。
IndexedDB相關API可參考
代碼
測試結果
總結
瀏覽器存儲技術目前流行的基本就上面介紹的三種，之前出現的webSql由於用方言SQLlite導致無法統一，也就是說這是一個廢棄的標準。
localStorage、indexedDB這裏沒有做詳細的介紹，只是簡單的給出示例代碼做做演示，不熟悉的可以查閱相關API。
參考資料
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…
zh.wikipedia.org/wiki/Cookie
www.ruanyifeng.com/blog/2018/0…
wangdoc.com/javascript/…