大家好，我是IT修真院北京分院第27期學(xué)員新思，一枚正直善良的前端程序員今天跟大家分享一下前端知識(shí)點(diǎn)窖梁。
今天講下深度思考中的知識(shí)點(diǎn)
————請(qǐng)描述一下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 屬性允許你訪問一個(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 屬性允許你訪問一個(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.常見問題
問題：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)上新荤，可能會(huì)導(dǎo)致數(shù)據(jù)泄露，雖然進(jìn)行過(guò)加密台汇，但是攻擊者拿到cookie后仍然可以登錄苛骨，因?yàn)殡y以識(shí)別是否為同一個(gè)用戶在登陸。（除非用HTTPS）
Cookies 只能存儲(chǔ)有限的 4KB 數(shù)據(jù)苟呐，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的痒芝。
OCALSTORAGE和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è)面才能訪問并且當(dāng)會(huì)話結(jié)束后（關(guān)閉標(biāo)簽頁(yè)，不包括刷新和跳轉(zhuǎn)） 數(shù)據(jù)也隨之銷毀赠幕。因此sessionStorage不是一種持久化的本地存儲(chǔ)俄精，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage可以在多個(gè)標(biāo)簽頁(yè)中互相訪問用于持久化的本地存儲(chǔ)榕堰，可以在多個(gè)標(biāo)簽頁(yè)中互相訪問,除非主動(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;
但我們可以通過(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.localStorage是否可以在同源窗口共享
答：localStorage可以同源窗口共享俭令。
2.sessionStroage應(yīng)用場(chǎng)景后德？
答：在不需要和服務(wù)器交互的場(chǎng)所，用來(lái)存儲(chǔ)用戶數(shù)據(jù)之類的抄腔，可以在路由頁(yè)跳轉(zhuǎn)的時(shí)候取出更改儲(chǔ)存瓢湃，減少調(diào)用接口的次數(shù)，減輕服務(wù)器壓力妓柜。
3.用storage怎么來(lái)判斷用戶是否需要再登陸箱季？
可以用加密的方法存儲(chǔ)涯穷，每次用戶訪問的時(shí)候可以取出調(diào)用服務(wù)器接口作為參數(shù)發(fā)送進(jìn)行對(duì)比棍掐，存在賬號(hào)密碼就直接跳過(guò)登錄頁(yè)。
感謝閱讀
github-PPT鏈接
騰訊視頻鏈接
https://v.qq.com/x/page/n0543q7ttsl.html
-----------------------------------------------------------------------------------------------------------------------------------
人生苦短拷况，想學(xué)Python作煌。
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)赚瘦，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處粟誓。
