寫在前面：前三種方式你們都和很熟悉，由於cookie、sessionStorage、localStorage都屬於js語言的本地存貯，而indexedDB是一種前端存儲數據庫，這篇文章會分別介紹這四種方式，以及他們之間的共同點和不一樣點。html
1.cookie
Cookie 是一些數據, 存儲於你電腦上的文本文件中。前端
當 web 服務器向瀏覽器發送 web 頁面時，在鏈接關閉後，服務端不會記錄用戶的信息,而Cookie 的做用就是用於解決 "如何記錄客戶端的用戶信息":web
當用戶訪問 web 頁面時，他的名字能夠記錄在 cookie 中。 在用戶下一次訪問該網站時，能夠在 cookie 中讀取用戶訪問記錄。好比，下次訪問同一網站時，用戶沒必要輸入用戶名和密碼就已經登陸了（排除用戶手工刪除Cookie狀況）sql
cookie的幾個常見的用法見下面封裝的Cookie增刪改查函數數據庫
//添加cookie
function setCookie(key, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = key + '=' + value + ';expires=' + oDate;
}
//刪除cookie
function removeCookie(key) {
setCookie(key, '', -1);//這裏只須要把Cookie保質期退回一天即可以刪除
}
//獲取cookie
function getCookie(key) {
var cookieArr = document.cookie.split('; ');
for(var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split('=');
if(arr[0] === key) {
return arr[1];
}
}
return false;
}
複製代碼
具體用法可參見Cookie詳解json
2.localStorage和sessionStorage
localStorage 和 sessionStorage 屬性容許在瀏覽器中存儲 key/value 對的數據。api
sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁以後將會刪除這些數據。 localStorage 用於長久保存整個網站的數據，保存的數據沒有過時時間，直到手動去除。 基本用法見下面代碼：瀏覽器
// 存儲
localStorage.setItem("lastname", "Smith");
// 檢索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
// 存儲
sessionStorage.setItem("lastname", "Smith");
// 檢索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
複製代碼
具體用法可參見JavaScript 存儲對象緩存
3.indexedDB
indexedDB就是一個非關係型數據庫，它不須要你去寫一些特定的sql語句來對數據庫進行操做，由於它是nosql的，數據形式使用的是json。 具體用法可參見IndexedDB中文文檔安全
1.cookie
優勢：
- 具備生命週期。保存用戶的登錄狀態，用戶進行登錄，成功登錄後，服務器生成特定的cookie返回給客戶端，客戶端下次訪問該域名下的任何頁面，將該cookie的信息發送給服務器，服務器通過檢驗，來判斷用戶是否登錄。能夠在客戶端上保存用戶數據，記錄用戶的行爲等
- 不須要任何服務器資源。 Cookie 存儲在客戶端並在發送後由服務器讀
- 使用較簡單。Cookie 是一種基於文本的輕量結構，包含簡單的鍵值對。
- 數據持久性。雖然客戶端計算機上 Cookie 的持續時間取決於客戶端上的 Cookie 過時處理和用戶干預，Cookie 一般是客戶端上持續時間最長的數據保留形式。
缺點：
- 安全性隱患，cookie使用明文傳輸。若是cookie被人攔截了，那人就能夠取得全部的session信息，能夠操縱和篡改其計算機上的 Cookie。另外，雖然 Cookie 只能被將它們發送到客戶端的域訪問，歷史上黑客已經發現從用戶計算機上的其餘域訪問 Cookie 的方法。
- 大小和長度受到限制。大多數瀏覽器對 Cookie 的大小有 4096 字節的限制
- 增長流量消耗，每次http請求都須要帶上cookie信息，浪費寬帶。
- 使用受限制。由於Cookie依賴於客戶端，有些用戶禁用了瀏覽器或客戶端設備接收 Cookie 的能力，所以限制了這一功能。
2.localStorage和sessionStorage
優勢：
- 存儲數據量大
- 不會隨http請求一塊兒發送,減小流量消耗
- 使用靈活，可根據二者不一樣特色變換使用localStorage和sessionStorage
缺點：
- 在瀏覽器的隱身模式下不能讀取(能夠採用window.name模擬sessionStorage的方式處理)
- 本質是在讀寫文件，寫入數據量大的話會出現卡頓現象（firefox是將localstorage寫入內存中的）
- 不能被爬蟲讀取,因此不利於seo（由於要進行SEO，必須直接輸出完整HTML，所以必須讓樣式在頭部以link標籤加載。若是先輸出HTML，後用js從本地緩存讀取樣式再插入，會出現嚴重的阻塞和性能問題）
- pc端兼容性不是很好
3.indexedDB
優勢：
- 存貯數量大且數據持久性長。（前面提到，sessionStorage關閉窗口頁面後就會自動清除掉，而清除瀏覽器緩存後localStorage會被刪除，雖然cookie數據持久性好可是有數據量小等多個弊端，indexedDB結合了前面三者優勢，取其精華，去其槽粕）
- 以字符串形式存貯適合大量數據。（LocalStorage是用key-value鍵值模式存儲數據，IndexedDB它存儲的數據都是字符串形式。若是你想讓LocalStorage存儲對象，你須要藉助JSON.stringify()能將對象變成字符串形式，再用JSON.parse()將字符串還原成對象。畢竟，localstorage就是專門爲小數量數據設計的，因此它的api設計爲同步的。而IndexedDB很適合存儲大量數據，它的API是異步調用的。IndexedDB使用索引存儲數據，各類數據庫操做放在事務中執行。IndexedDB甚至還支持簡單的數據類型。對於簡單的數據，你應該繼續使用localstorage，但當你但願存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更爲複雜的查詢數據的方式）
缺點：
- 是一種數據庫形式，使用相對複雜，學習成本較高
- 使用須要構建環境，相比於cookie、sessionStorage、localStorage開發移植性較差
4.總結
結合以上介紹的這幾種前端存儲技術的優缺點，咱們能夠得出使用參考建議：
- 移動端儘可能使用 localStorage與sessionStroage爲主
- pc端使用根據瀏覽器兼容狀況以sessionStorage、localStorage爲主，cookie爲輔
- 對於簡單的數據，使用sessionStorage和localstorage爲主，但當你但願存儲大量數據時，IndexedDB會明顯的更適合，IndexedDB能提供你更爲複雜的查詢數據的方式
前面基本和主要的點都說的差很少了，最後爲你們送上總結出來的cookie、sessionStorage、localStorage這三者的主要的幾個不一樣點和相同點：
1.不一樣點
- 傳遞方式不一樣
cookie數據始終在同源的http請求中攜帶(即便不須要)，即cookie在瀏覽器和服務器間來回傳遞。
sessionStorage和loaclStorage不會自動把數據發給服務器，僅在本地保存。- 數據大小不一樣
cookie數據還有路徑(path)的概念，能夠限制cookie只屬於某個路徑下。 存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。
sessionStorage和localStorage雖然也有存儲大小的限制,但比cookie大得多，能夠達到5M或者更大。- 數據有效期不一樣
sessionStorage:僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；
localStorage:始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；
cookie只在設置cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。- 做用域不一樣
sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
localStorage在全部同源窗口中都是共享的；
cookie也是在全部同源窗口中都是共享的。
2.相同點 都保存在瀏覽器端，都是同源的