Web前端數據存儲

Cookie

　　會跟隨每次請求附加到請求header上，大小限制4k。

　　部署對象： document.cookie

　　構成： Key-Value

　　有效期：根據expires配置

　　可選項：

• • ;path=path (例如 '/', '/mydir') 若是沒有定義，默認爲當前文檔位置的路徑。
  • ;domain=domain (例如 'example.com'， '.example.com' (包括全部子域名), 'subdomain.example.com') 若是沒有定義，默認爲當前文檔位置的路徑的域名部分。
  • ;max-age=max-age-in-seconds (例如一年爲60*60*24*365)
  • ;expires=date-in-GMTString-format 若是沒有定義，cookie會在對話結束時過時
  • ;secure (cookie只經過https協議傳輸)

　　API：　　　　

• • docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
  • docCookies.getItem(name)
  • docCookies.removeItem(name[, path],domain)
  • docCookies.hasItem(name)

Local Storage

　　大小5M/Domain

　　部署對象：window.localStorage

　　構成：Key-Value

　　存儲內容格式：字符串

　　有效期：永久存儲/手動刪除

 　　常見場景：請求緩存(ajax)

　　優缺點：跨瀏覽器會話；不能跨域共享

　　API：

• • getItem //取記錄
  • setIten//設置記錄
  • removeItem//移除記錄
  • key//取key所對應的值
  • clear//清除記錄　

 

Session Storage

　　有效期：頁面會話結束即被清除

　　　　注意：頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。在新標籤或窗口打開一個頁面會初始化一個新的會話。

　　其他同Local Storage

 

IndexedDB

  　大小：根據瀏覽器不一樣，250M以上

　　基於事務的本地數據存儲

　　部署對象：window.indexedDB

　　構成：對象倉庫（object store）存儲

　　內容格式： 接近NoSQL數據庫，二進制

　　優勢：同域限制，使用索引迅速定位數據，提升搜索速度

　　

refers：

https://www.cnblogs.com/LuckyWinty/p/5699117.html

http://web.jobbole.com/88241/