打開chrome開發者工具application，我們可以清楚的看到storage包含以下內容：
什么是cookie?
- cookie一般是由服務器用Set-Cookie 頭給客戶端一串字符串
- 客戶端每次訪問相同域名的網頁時，必須帶上這段字符串
- 客戶端要在一段時間內保存這個Cookie
- Cookie 默認在用戶關閉頁面后就失效，后台代碼可以任意設置 Cookie 的過期時間
- cookie存放於硬盤，通常大小為4KB
- 前端最好不要讀寫cookie
- 用戶可以人為修改cookie
什么是session?
- 正是因為用戶可以修改cookie,所以誕生出session,它是基於cookie的.
- session是服務器上的一塊內存(hash表),保存了所有session
- session將 SessionID（隨機數）通過 Cookie 發給客戶端.客戶端訪問服務器時，服務器讀取 SessionID
- 服務器再通過 SessionID 可以得到對應用戶的隱私信息，如 id、email
什么是localstorage?
- LocalStorage 跟 HTTP 無關
- HTTP 不會帶上 LocalStorage 的值
- 只有相同域名的頁面才能互相讀取 LocalStorage（沒有同源那么嚴格）
- 每個域名 localStorage 存儲量一般為 5M
- 常用場景：記錄有沒有提示過用戶（沒有用的信息，不能記錄密碼）
- LocalStorage 永久有效，除非用戶清理緩存
什么是sessionstorage?
- sessionstorage是會話存儲，跟localstorage功能相似，區別在於關閉瀏覽器窗口隨即清除
- sessionstorage與session無關.
什么是cache-control?
- cache-control通常用於優化網頁性能,適當使用可減少重復讀取相同內容
- 可以在服務端setHeader設置cache-control
- 可以設置讓該字段存於緩存中，瀏覽器下次訪問時不發起請求，直接從緩存中讀取該資源，比如我們的CDN的樣式/腳本/圖片就經常使用到
什么是IndexedDB?
- Indexed DB 的操作是異步的，不會阻塞主線程的執行，可以在 window、web workers、service workers 環境中使用。
- IndexedDB 是基於文件存儲的，API 較為復雜，包含 v1 v2 的差異，建議通過類庫來使用，比如：Dexie.js。
什么是ETag?
- ETag通常用於優化網頁性能,適當使用可減少重復讀取相同內容
- 可通過服務端setHeader設置etag為相應的字段的md5值
- 瀏覽器訪問時,request.headers會帶有if-none-match屬性(為上述MD5),若不等於則說明服務器上的
該資源與本地存儲的該資源不相同,需要重新從服務器加載;若相等則說明兩者資源相同,則直接從本地
緩存獲取.后端應設置statusCode=304.與cache-control不同的是:etag始終都要發請求和收響應,而
cache-control不發請求.
Cookie、localStorage、sessionStorage區別
- 存儲大小：Cookie4K，Storage5M
- 有效期：Cookie擁有有效期，Storage永久存儲
- Cookie會發送到服務器端，存儲在內存中，Storage只能存儲在瀏覽器
- 路徑：Cookie有路徑限制，Storage只存儲在域名下
- API：Cookie沒有特定的API，Storage有對應的API
VUEX數據存儲在哪里？
- 存放於內存
- 存儲大小沒有限制
參考文章
https://segmentfault.com/a/1190000038309852
https://www.jianshu.com/p/109ffcb0aca5
https://zhuanlan.zhihu.com/p/373190925