1.cookie
存儲(chǔ)在用戶(hù)本地終端上的數(shù)據(jù)。也用cookies蚀瘸，某些網(wǎng)站為了辨別用戶(hù)身份狡蝶，進(jìn)行session而儲(chǔ)存在本地瀏覽器上的數(shù)據(jù)，經(jīng)過(guò)加密贮勃。一般應(yīng)用最典型的案例就是判斷注冊(cè)用戶(hù)是否已經(jīng)登錄該網(wǎng)站贪惹。
2.HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法：(HTML 5 Web 存儲(chǔ))...兩者都是僅在客戶(hù)端（即瀏覽器）中保存，不參與和服務(wù)器的通信寂嘉；
localStorage - 沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ),第二天奏瞬、第二周或下一年之后，數(shù)據(jù)依然可用泉孩。
如何創(chuàng)建和訪(fǎng)問(wèn) localStorage：
localStorage.lastname="Smith";
document.write(localStorage.lastname)
下面的例子對(duì)用戶(hù)訪(fǎng)問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)：
if(localStorage.pagecount){
? ? ? ? ? ? ? ?localStorage.pagecount=Number(localStorage.pagecount) +1;
? ? ? ?}else{
? ? ? ? ? ? ? ? ? ? ?localStorage.pagecount=1;
? ? ? ? ?}
document.write("Visits "+ localStorage.pagecount +" time(s).");
sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ),當(dāng)用戶(hù)關(guān)閉瀏覽器窗口后硼端，數(shù)據(jù)會(huì)被刪除。
創(chuàng)建并訪(fǎng)問(wèn)一個(gè) sessionStorage：
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
下面的例子對(duì)用戶(hù)在當(dāng)前 session 中訪(fǎng)問(wèn)頁(yè)面的次數(shù)進(jìn)行計(jì)數(shù)：
if(sessionStorage.pagecount){
? ? ? ? ? ? ? ?sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
? ? }else{
? ? ? ? ? ? ? sessionStorage.pagecount=1;
? ? ?}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
sessionStorage 棵譬、localStorage 和 cookie 之間的區(qū)別
共同點(diǎn)：都是保存在瀏覽器端显蝌，且同源的预伺。
sessionStorage 订咸、localStorage支持IE8以上
區(qū)別：cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞酬诀；cookie數(shù)據(jù)還有路徑（path）的概念脏嚷，可以限制cookie只屬于某個(gè)路徑下。存儲(chǔ)大小限制也不同瞒御，cookie數(shù)據(jù)不能超過(guò)4k父叙，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話(huà)標(biāo)識(shí)趾唱。
而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器涌乳，僅在本地保存。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制甜癞，但比cookie大得多夕晓，可以達(dá)到5M或更大。
數(shù)據(jù)有效期不同悠咱，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效蒸辆，自然也就不可能持久保持；localStorage：始終有效析既，窗口或?yàn)g覽器關(guān)閉也一直保存躬贡，因此用作持久數(shù)據(jù)；cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效眼坏，即使窗口或?yàn)g覽器關(guān)閉拂玻。
作用域不同，sessionStorage不在不同的瀏覽器窗口中共享宰译，即使是同一個(gè)頁(yè)面纺讲；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的囤屹。Web?Storage 支持事件通知機(jī)制熬甚，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。Web?Storage?的 api 接口使用更方便肋坚。
應(yīng)用場(chǎng)景
有了對(duì)上面這些差別的直觀(guān)理解乡括，我們就可以討論三者的應(yīng)用場(chǎng)景了。
因?yàn)榭紤]到每個(gè) HTTP 請(qǐng)求都會(huì)帶著 Cookie 的信息智厌，所以 Cookie 當(dāng)然是能精簡(jiǎn)就精簡(jiǎn)啦诲泌，比較常用的一個(gè)應(yīng)用場(chǎng)景就是判斷用戶(hù)是否登錄。針對(duì)登錄過(guò)的用戶(hù)铣鹏，服務(wù)器端會(huì)在他登錄時(shí)往 Cookie 中插入一段加密過(guò)的唯一辨識(shí)單一用戶(hù)的辨識(shí)碼敷扫，下次只要讀取這個(gè)值就可以判斷當(dāng)前用戶(hù)是否登錄啦。曾經(jīng)還使用 Cookie 來(lái)保存用戶(hù)在電商網(wǎng)站的購(gòu)物車(chē)信息诚卸，如今有了 localStorage葵第，似乎在這個(gè)方面也可以給 Cookie 放個(gè)假了~
而另一方面 localStorage 接替了 Cookie 管理購(gòu)物車(chē)的工作，同時(shí)也能勝任其他一些工作合溺。比如HTML5游戲通常會(huì)產(chǎn)生一些本地?cái)?shù)據(jù)卒密，localStorage 也是非常適用的。如果遇到一些內(nèi)容特別多的表單棠赛，為了優(yōu)化用戶(hù)體驗(yàn)哮奇，我們可能要把表單頁(yè)面拆分成多個(gè)子頁(yè)面膛腐，然后按步驟引導(dǎo)用戶(hù)填寫(xiě)。這時(shí)候 sessionStorage 的作用就發(fā)揮出來(lái)了鼎俘。
安全性的考慮
需要注意的是哲身，不是什么數(shù)據(jù)都適合放在 Cookie、localStorage 和 sessionStorage 中的贸伐。使用它們的時(shí)候律罢，需要時(shí)刻注意是否有代碼存在 XSS （不是太清楚XSS）注入的風(fēng)險(xiǎn)。因?yàn)橹灰蜷_(kāi)控制臺(tái)棍丐，你就隨意修改它們的值误辑，也就是說(shuō)如果你的網(wǎng)站中有 XSS 的風(fēng)險(xiǎn)，它們就能對(duì)你的 localStorage 肆意妄為歌逢。所以千萬(wàn)不要用它們存儲(chǔ)你系統(tǒng)中的敏感數(shù)據(jù)巾钉。
