一伦意、cookie
生命期為只在設置的cookie過期時間之前一直有效火窒，即使窗口或瀏覽器關閉。 存放數(shù)據(jù)大小為4K左右 驮肉。有個數(shù)限制（各瀏覽器不同）熏矿，一般不能超過20個。與服務器端通信：每次都會攜帶在HTTP頭中离钝，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題票编。
cookie的優(yōu)點：具有極高的擴展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小卵渴。
2.通過加密和安全傳輸技術慧域，減少cookie被破解的可能性。
3.只有在cookie中存放不敏感的數(shù)據(jù)浪读，即使被盜取也不會有很大的損失昔榴。
4.控制cookie的生命期，使之不會永遠有效碘橘。這樣的話偷盜者很可能拿到的就 是一個過期的cookie互订。
cookie的缺點：
1.cookie的長度和數(shù)量的限制。每個domain最多只能有20條cookie痘拆，每個cookie長度不能超過4KB仰禽。否則會被截掉。
2.安全性問題纺蛆。如果cookie被人攔掉了吐葵，那個人就可以獲取到所有session信息。加密的話也不起什么作用桥氏。
3.有些狀態(tài)不可能保存在客戶端折联。例如，為了防止重復提交表單识颊，我們需要在服務端保存一個計數(shù)器诚镰。若吧計數(shù)器保存在客戶端，則起不到什么作用祥款。
二清笨、webstorage是本地存儲，存儲在客戶端刃跛，包括localStorage和sessionStorage抠艾。
1.localStorage
localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息桨昙，否則這些信息將永遠存在检号。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存腌歉，不參與和服務器的通信。
2.sessionStorage
為每一個數(shù)據(jù)源維持一個存儲區(qū)域齐苛，在瀏覽器打開期間存在翘盖，包括頁面重新加載
api
sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON
保存數(shù)據(jù)到本地
const student= {
name: 'Lee',
age: 20,
id: '001'
};
sessionStorage.setItem('token', JSON.stringify(student));
localStorage.setItem('token', JSON.stringify(student));
從本地存儲獲取數(shù)據(jù)
var data1 = JSON.parse(sessionStorage.getItem('token'));
var data2 = JSON.parse(localStorage.getItem('token'));
本地存儲中刪除某個保存的數(shù)據(jù)
sessionStorage.removeItem('token');
localStorage.removeItem('token');
刪除所有保存的數(shù)據(jù)
sessionStorage.clear();
localStorage.clear();
作用域不同
不同瀏覽器無法共享localStorage或sessionStorage中的信息凹蜂。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬于相同域名和端口）馍驯，但是不同頁面或標簽頁間無法共享sessionStorage的信息。這里需要注意的是玛痊，頁面及標 簽頁僅指頂級窗口汰瘫，如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的擂煞。
localStorage混弥、sessionStorage、Cookie共同點：都是保存在瀏覽器端对省，且同源的剑逃。
三、再來說說indexedDB
在使用一個技術之前官辽，先搞清楚它是什么蛹磺，這對你的理解很重要，從DB就可以看出同仆，它肯定是一個數(shù)據(jù)庫萤捆，而說到數(shù)據(jù)庫，有兩種不同類型的數(shù)據(jù)庫俗批，就是關系型數(shù)據(jù)庫和非關系型數(shù)據(jù)庫俗或，關系型數(shù)據(jù)庫如Mysql、Oracle等將數(shù)據(jù)存儲在表中岁忘，而非關系型數(shù)據(jù)庫如Redis辛慰、MongoDB等將數(shù)據(jù)集作為個體對象存儲。indexedDB就是一個非關系型數(shù)據(jù)庫干像，它不需要你去寫一些特定的sql語句來對數(shù)據(jù)庫進行操作帅腌，因為它是nosql的，數(shù)據(jù)形式使用的是json麻汰，
意義
也許熟悉前端存儲的會說速客，不是有了LocalStorage和Cookies嗎？為什么還要推出indexedDB呢五鲫？其實對于在瀏覽器里存儲數(shù)據(jù)溺职，你可以使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了類似數(shù)據(jù)庫風格的數(shù)據(jù)存儲和使用方式浪耘。
首先說說Cookies乱灵，英文直接翻譯過來就是小甜點，聽起來很好吃七冲，實際上并不是痛倚，每次HTTP接受和發(fā)送都會傳遞Cookies數(shù)據(jù)，它會占用額外的流量癞埠。例如状原，如果你有一個10KB的Cookies數(shù)據(jù)聋呢，發(fā)送10次請求苗踪，那么，總計就會有100KB的數(shù)據(jù)在網(wǎng)絡上傳輸削锰。Cookies只能是字符串通铲。瀏覽器里存儲Cookies的空間有限，很多用戶禁止瀏覽器使用Cookies器贩。所以颅夺，Cookies只能用來存儲小量的非關鍵的數(shù)據(jù)。
其次說說LocalStorage蛹稍，LocalStorage是用token-value鍵值模式存儲數(shù)據(jù)吧黄，但跟IndexedDB不一樣的是，它的數(shù)據(jù)并不是按對象形式存儲唆姐。它存儲的數(shù)據(jù)都是字符串形式拗慨。如果你想讓LocalStorage存儲對象，你需要借助JSON.stringify()能將對象變成字符串形式奉芦，再用JSON.parse()將字符串還原成對象赵抢。但如果要存儲大量的復雜的數(shù)據(jù)，這并不是一種很好的方案声功。畢竟烦却，localstorage就是專門為小數(shù)量數(shù)據(jù)設計的，所以它的api設計為同步的先巴。而IndexedDB很適合存儲大量數(shù)據(jù)其爵，它的API是異步調用的。IndexedDB使用索引存儲數(shù)據(jù)伸蚯，各種數(shù)據(jù)庫操作放在事務中執(zhí)行醋闭。IndexedDB甚至還支持簡單的數(shù)據(jù)類型。IndexedDB比localstorage強大得多朝卒，但它的API也相對復雜证逻。對于簡單的數(shù)據(jù)，你應該繼續(xù)使用localstorage，但當你希望存儲大量數(shù)據(jù)時囚企，IndexedDB會明顯的更適合丈咐，IndexedDB能提供你更為復雜的查詢數(shù)據(jù)的方式。
indexedDB的特性
1.對象倉庫
2.事務性
3.基于請求
4.異步
使用
打開數(shù)據(jù)庫并且開始一個事務龙宏。
創(chuàng)建一個 object store棵逊。
構建一個請求來執(zhí)行一些數(shù)據(jù)庫操作，像增加或提取數(shù)據(jù)等银酗。
通過監(jiān)聽正確類型的 DOM 事件以等待操作完成辆影。
在操作結果上進行一些操作（可以在 request 對象中找到）
