大家好笨使，我是IT修真院北京分院25期的學(xué)員卿樱，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網(wǎng)js任務(wù)6硫椰，深度思考中的知識(shí)點(diǎn)——cookies繁调，sessionStorage和localStorage的區(qū)別？靶草？
1.背景介紹
SessionStorage, LocalStorage, Cookie這三者都可以被用來(lái)在瀏覽器端存儲(chǔ)數(shù)據(jù)蹄胰，而且都是字符串類型的鍵值對(duì)。
區(qū)別在于前兩者屬于WebStorage奕翔，創(chuàng)建它們的目的便于客戶端存儲(chǔ)數(shù)據(jù)裕寨。 而Cookie早在網(wǎng)景公司的瀏覽器中就開始支持，最初目的是為了保持HTTP的狀態(tài)派继。
2.知識(shí)剖析
Cookie?
HTTP Cookie（也叫Web cookie或者瀏覽器Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)宾袜，它會(huì)在瀏覽器下一次發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。比較經(jīng)典的驾窟，可以它用來(lái)確定兩次請(qǐng)求是否來(lái)自于同一個(gè)瀏覽器庆猫，從而能夠確認(rèn)和保持用戶的登錄狀態(tài)。Cookie的使用使得基于無(wú)狀態(tài)的HTTP協(xié)議上記錄穩(wěn)定的狀態(tài)信息成為了可能绅络。
sessionStorage
sessionStorage 屬性允許你訪問(wèn)一個(gè) session Storage 對(duì)象月培。它與 localStorage 相似，不同之處在于 localStorage
里面存儲(chǔ)的數(shù)據(jù)沒有過(guò)期時(shí)間設(shè)置恩急，而存儲(chǔ)在 sessionStorage
里面的數(shù)據(jù)在頁(yè)面會(huì)話結(jié)束時(shí)會(huì)被清除节视。頁(yè)面會(huì)話在瀏覽器打開期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話假栓。在新標(biāo)簽或窗口打開一個(gè)頁(yè)面會(huì)初始化一個(gè)新的會(huì)話寻行，這點(diǎn)和 session
cookies 的運(yùn)行方式不同。
localStorage
localStorage 屬性允許你訪問(wèn)一個(gè) local Storage 對(duì)象匾荆。localStorage 與 sessionStorage 相似拌蜘。不同之處在于杆烁，存儲(chǔ)在 localStorage
里面的數(shù)據(jù)沒有過(guò)期時(shí)間（expiration time），而存儲(chǔ)在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話（browsing session）結(jié)束時(shí)被清除简卧，即瀏覽器關(guān)閉時(shí)兔魂。
3.常見問(wèn)題
問(wèn)題：Cookie是如何工作的？
Cookie可用于客戶端數(shù)據(jù)的存儲(chǔ)举娩，在沒有其它存儲(chǔ)辦法時(shí)析校，使用這種方式是可行的妨退，但隨著現(xiàn)在瀏覽器開始支持各種各樣的存儲(chǔ)方式而逐漸被廢棄懦趋。
由于服務(wù)器指定Cookie以后瀏覽器的每次請(qǐng)求都會(huì)攜帶Cookie數(shù)據(jù)乘陪，這會(huì)帶來(lái)額外的性能負(fù)擔(dān)（尤其是在移動(dòng)環(huán)境下）泻仙。
新的瀏覽器API已經(jīng)允許開發(fā)者直接在本地存儲(chǔ)數(shù)據(jù)，如可以使用Web storage API （本地存儲(chǔ)和會(huì)話存儲(chǔ)）和IndexedDB（索引數(shù)據(jù)庫(kù)）霞扬。
Cookie主要用在以下三個(gè)方面:
會(huì)話狀態(tài)管理（如用戶登錄狀態(tài)央勒、購(gòu)物車）
個(gè)性化設(shè)置（如用戶自定義設(shè)置）
瀏覽器行為跟蹤（如跟蹤分析用戶行為）
Cookie的缺陷
每個(gè) HTTP 請(qǐng)求中都包含 Cookies咧叭，從而導(dǎo)致傳輸相同的數(shù)據(jù)減緩我們的 Web 應(yīng)用程序纹烹。
每個(gè) HTTP 請(qǐng)求中都包含 Cookies页滚，從而導(dǎo)致發(fā)送未加密的數(shù)據(jù)到互聯(lián)網(wǎng)上。（除非用HTTPS）
Cookies 只能存儲(chǔ)有限的 4KB 數(shù)據(jù)铺呵，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的裹驰。
LocalStorage和SessionStorage?
html5中的Web Storage包括了兩種存儲(chǔ)方式：sessionStorage和localStorage。 不會(huì)被發(fā)送到服務(wù)器上片挂。同時(shí)空間比Cookie大很多幻林，一般支持5-10M。
與Cookie類似宴卖，每個(gè)域名下會(huì)有不同的localStorage和SessionStorage實(shí)例滋将。
sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)邻悬，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)并且當(dāng)會(huì)話結(jié)束后（關(guān)閉標(biāo)簽頁(yè)症昏，不包括刷新和跳轉(zhuǎn)）
數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)父丰，僅僅是會(huì)話級(jí)別的存儲(chǔ)肝谭。
localStorage可以在多個(gè)標(biāo)簽頁(yè)中互相訪問(wèn)用于持久化的本地存儲(chǔ)，可以在多個(gè)標(biāo)簽頁(yè)中互相訪問(wèn),除非主動(dòng)刪除數(shù)據(jù)蛾扇，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的攘烛。
注意SessionStorage中的Session指的是瀏覽器會(huì)話，而非服務(wù)器端通過(guò)Cookie實(shí)現(xiàn)的Session镀首。
Storage的使用
LocalStorage/SessionStorage也是基于字符串的鍵值對(duì)存儲(chǔ)坟漱。可以通過(guò)setItem更哄，getItem,clear,removeIteml來(lái)存取控制數(shù)據(jù)：
clear()：刪除所有值芋齿。
getItem(name)：根據(jù)指定的名字name獲取對(duì)應(yīng)的值
key(index)：在指定的數(shù)字位置獲取該位置的名字腥寇。
removeItem(name)：刪除由name指定的名值對(duì)
setItem(name,value)：為指定名字設(shè)置一個(gè)對(duì)應(yīng)的值
localStorage.setItem("name","wangerxiao");
//這樣就用localStorage存儲(chǔ)了一個(gè)名字為name的數(shù)據(jù)，數(shù)據(jù)的內(nèi)容為 “wangerxiao"
localStorage.getItem("name");
//這樣就讀取了名字為“name”的數(shù)據(jù)的值觅捆。
但是赦役，storage只能存儲(chǔ)字符串的數(shù)據(jù)，對(duì)于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲(chǔ)栅炒。
var obj = { name:'Jim' };
sessionStorage.obj = obj;
localStorage.obj = obj;
var arr = [1,2,3];
sessionStorage.obj = arr;
localStorage.obj = arr;
注意：上面這種寫法是錯(cuò)誤的
但我們可以通過(guò)JSON對(duì)象提供的parse和stringify將其他數(shù)據(jù)類型轉(zhuǎn)化成字符串掂摔，再存儲(chǔ)到storage中就可以了。
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉(zhuǎn)換為對(duì)象
obj = JSON.parse(str);
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
總結(jié)：sessionStorage 赢赊、localStorage 和 cookie 之間的異同
共同點(diǎn)：都是保存在瀏覽器端乙漓，且同源的。
不同點(diǎn)：
1.cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）域携，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞簇秒。
而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存秀鞭。cookie數(shù)據(jù)還有路徑（path）的概念趋观，可以限制cookie只屬于某個(gè)路徑下。
2.存儲(chǔ)大小限制也不同锋边，cookie數(shù)據(jù)不能超過(guò)4k皱坛，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)豆巨，如會(huì)話標(biāo)識(shí)剩辟。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多往扔，可以達(dá)到5M或更大贩猎。
3.數(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)閉串塑。
4.作用域不同沼琉，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面桩匪；localStorage 在所有同源窗口中都是共享的打瘪；cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者闺骚。
6.Web Storage 的 api 接口使用更方便桃移。
7.參考文獻(xiàn)
參考謝燦勇的博客
參考使用sessionStorage、localStorage存儲(chǔ)數(shù)組與對(duì)象
參考請(qǐng)描述一下 cookies葛碧，sessionStorage 和 localStorage 的區(qū)別借杰？
8.更多討論
1. 問(wèn)：angualr如何修改過(guò)期時(shí)間cookie
? ?答：使用$cookie方法
2. 問(wèn)：storage的API有那些
? ?答：clear()，getItem()进泼，key()蔗衡，removeItem()，setItem()
3. 問(wèn)：怎樣獲取cookie的存儲(chǔ)內(nèi)容
? ? 答：$cookieStore.get
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師乳绕，現(xiàn)在開始绞惦，找個(gè)師兄，帶你入門洋措，掌控自己學(xué)習(xí)的節(jié)奏济蝉，學(xué)習(xí)的路上不再迷茫”菠发。
這里是技能樹.IT修真院王滤，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化滓鸠，成長(zhǎng)可見化雁乡，師兄1對(duì)1免費(fèi)指導(dǎo)∶铀祝快來(lái)與我一起學(xué)習(xí)吧?踱稍！
