瀏覽器的緩存機(jī)制提供了可以將用戶(hù)數(shù)據(jù)存儲(chǔ)在客戶(hù)端上的方式丽焊，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互。
一重付、cookie和session
cookie和session都是用來(lái)跟蹤瀏覽器用戶(hù)身份的會(huì)話方式凫乖。
區(qū)別：
1、保持狀態(tài)：cookie保存在瀏覽器端删掀，session保存在服務(wù)器端
2导街、使用方式：
（1）cookie機(jī)制：如果不在瀏覽器中設(shè)置過(guò)期時(shí)間搬瑰，cookie被保存在內(nèi)存中控硼，生命周期隨瀏覽器的關(guān)閉而結(jié)束艾少，這種cookie簡(jiǎn)稱(chēng)會(huì)話cookie缚够。如果在瀏覽器中設(shè)置了cookie的過(guò)期時(shí)間，cookie被保存在硬盤(pán)中误堡，關(guān)閉瀏覽器后雏吭，cookie數(shù)據(jù)仍然存在思恐，直到過(guò)期時(shí)間結(jié)束才消失。
? ? ?Cookie是服務(wù)器發(fā)給客戶(hù)端的特殊信息，cookie是以文本的方式保存在客戶(hù)端婚温，每次請(qǐng)求時(shí)都帶上它
（2）session機(jī)制：當(dāng)服務(wù)器收到請(qǐng)求需要?jiǎng)?chuàng)建session對(duì)象時(shí)栅螟，首先會(huì)檢查客戶(hù)端請(qǐng)求中是否包含sessionid。如果有sessionid步绸，服務(wù)器將根據(jù)該id返回對(duì)應(yīng)session對(duì)象吃媒。如果客戶(hù)端請(qǐng)求中沒(méi)有sessionid赘那，服務(wù)器會(huì)創(chuàng)建新的session對(duì)象，并把sessionid在本次響應(yīng)中返回給客戶(hù)端祠斧。通常使用cookie方式存儲(chǔ)sessionid到客戶(hù)端拱礁，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器。如果用戶(hù)禁用cookie吴超，則要使用URL重寫(xiě)烛芬，可以通過(guò)response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)；API對(duì)encodeURL的結(jié)束為仆潮，當(dāng)瀏覽器支持Cookie時(shí)遣臼，url不做任何處理揍堰；當(dāng)瀏覽器不支持Cookie的時(shí)候，將會(huì)重寫(xiě)URL將SessionID拼接到訪問(wèn)地址后隐砸。
3蝙眶、存儲(chǔ)內(nèi)容：cookie只能保存字符串類(lèi)型幽纷，以文本的方式；session通過(guò)類(lèi)似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來(lái)保存峰尝，能支持任何類(lèi)型的對(duì)象(session中可含有多個(gè)對(duì)象)
4收恢、存儲(chǔ)的大信晌堋：cookie：?jiǎn)蝹€(gè)cookie保存的數(shù)據(jù)不能超過(guò)4kb；session大小沒(méi)有限制沛鸵。
5、安全性：cookie：針對(duì)cookie所存在的攻擊：Cookie欺騙疾捍，Cookie截獲栏妖；session的安全性大于cookie吊趾。
原因如下：（1）sessionID存儲(chǔ)在cookie中，若要攻破session首先要攻破cookie揩尸；
∧环（2）sessionID是要有人登錄恭金，或者啟動(dòng)session_start才會(huì)有，所以攻破cookie也不一定能得到sessionID粒褒；
≌赣埂（3）第二次啟動(dòng)session_start后，前一次的sessionID就是失效了，session過(guò)期后函筋，sessionID也隨之失效奠伪。
“砺省（4）sessionID是加密的
（5）綜上所述脸狸，攻擊者必須在短時(shí)間內(nèi)攻破加密的sessionID炊甲，這很難。
6吟吝、應(yīng)用場(chǎng)景：
cookie：（1）判斷用戶(hù)是否登陸過(guò)網(wǎng)站颈娜，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）官辽。如果我們刪除cookie，則每次登錄必須從新填寫(xiě)登錄的相關(guān)信息称开。
∨依妗（2）保存上次登錄的時(shí)間等信息扶镀。
（3）保存上次查看的頁(yè)面
±ト浮（4）瀏覽計(jì)數(shù)
session：Session用于保存每個(gè)用戶(hù)的專(zhuān)用信息狞膘，變量的值保存在服務(wù)器端什乙，通過(guò)SessionID來(lái)區(qū)分不同的客戶(hù)臣镣。
（1）網(wǎng)上商城中的購(gòu)物車(chē)
〉愦（2）保存用戶(hù)登錄信息
●骸（3）將某些數(shù)據(jù)放入session中，供同一用戶(hù)的不同頁(yè)面使用
≡馑瘛（4）防止用戶(hù)非法登錄
?7徒探、缺點(diǎn)：cookie：（1）大小受限
? ?（2）用戶(hù)可以操作（禁用）cookie测暗，使功能受限
? ?（3）安全性較低
? ?（4）有些狀態(tài)不可能保存在客戶(hù)端。
（5）每次訪問(wèn)都要傳送cookie給服務(wù)器碗啄，浪費(fèi)帶寬稚字。
? ?（6）cookie數(shù)據(jù)有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下瘫想。
? session：（1）Session保存的東西越多国夜，就越占用服務(wù)器內(nèi)存短绸，對(duì)于用戶(hù)在線人數(shù)較多的網(wǎng)站醋闭，服務(wù)器的內(nèi)存壓力會(huì)比較大。
÷狻（2）依賴(lài)于cookie（sessionID保存在cookie）瑟曲，如果禁用cookie洞拨，則要使用URL重寫(xiě)烦衣，不安全
（3）創(chuàng)建Session變量有很大的隨意性秸歧，可隨時(shí)調(diào)用衅澈，不需要開(kāi)發(fā)者做精確地處理今布，所以，過(guò)度使用session變量將會(huì)導(dǎo)致代碼不可讀而且不好維護(hù)侵蒙。
二纷闺、WebStorage
WebStorage的目的是克服由cookie所帶來(lái)的一些限制犁功，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶(hù)端時(shí)搞乏，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器请敦。
WebStorage兩個(gè)主要目標(biāo)：（1）提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。（2）提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制萤皂。
HTML5的WebStorage提供了兩種API：localStorage（本地存儲(chǔ)）和sessionStorage（會(huì)話存儲(chǔ)）匣椰。
1禽笑、生命周期：localStorage:localStorage的生命周期是永久的佳镜，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)蚀同，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失蠢络。
??sessionStorage的生命周期是在僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念啡省，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)冕杠。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面酸茴，數(shù)據(jù)依然存在分预。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷(xiāo)毀。同時(shí)獨(dú)立的打開(kāi)同一個(gè)窗口同一個(gè)頁(yè)面薪捍，sessionStorage也是不一樣的笼痹。
2、存儲(chǔ)大欣掖：localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是：5MB
3凳干、存儲(chǔ)位置：localStorage和sessionStorage都保存在客戶(hù)端，不與服務(wù)器進(jìn)行交互通信被济。
4、存儲(chǔ)內(nèi)容類(lèi)型：localStorage和sessionStorage只能存儲(chǔ)字符串類(lèi)型只磷，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理
5经磅、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;钮追。
6预厌、應(yīng)用場(chǎng)景：localStoragese：常用于長(zhǎng)期登錄（+判斷用戶(hù)是否已登錄），適合長(zhǎng)期保存在本地的數(shù)據(jù)元媚。sessionStorage：敏感賬號(hào)一次性登錄轧叽；
WebStorage的優(yōu)點(diǎn)：
（1）存儲(chǔ)空間更大：cookie為4KB，而WebStorage是5MB刊棕；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會(huì)傳送到服務(wù)器炭晒，存儲(chǔ)在本地的數(shù)據(jù)可以直接獲取，也不會(huì)像cookie一樣美詞請(qǐng)求都會(huì)傳送到服務(wù)器甥角，所以減少了客戶(hù)端和服務(wù)器端的交互腰埂，節(jié)省了網(wǎng)絡(luò)流量；
（3）對(duì)于那種只需要在用戶(hù)瀏覽一組頁(yè)面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)蜈膨，sessionStorage會(huì)非常方便屿笼；
（4）快速顯示：有的數(shù)據(jù)存儲(chǔ)在WebStorage上，再加上瀏覽器本身的緩存翁巍。獲取數(shù)據(jù)時(shí)可以從本地獲取會(huì)比從服務(wù)器端獲取快得多驴一，所以速度更快；
（5）安全性：WebStorage不會(huì)隨著HTTP header發(fā)送到服務(wù)器端灶壶，所以安全性相對(duì)于cookie來(lái)說(shuō)比較高一些肝断，不會(huì)擔(dān)心截獲，但是仍然存在偽造問(wèn)題驰凛；
（6）WebStorage提供了一些方法胸懈，數(shù)據(jù)操作比cookie方便；
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個(gè)索引的key：localStorage.key(index);
登陸信息用cookie好還是localStorage好恰响？
你的需求可以拆成兩個(gè)部分：認(rèn)證 和 鑒權(quán)
認(rèn)證識(shí)別這個(gè)用戶(hù)的身份
鑒權(quán)確定這個(gè)用戶(hù)訪問(wèn)首頁(yè)之后是否需要跳轉(zhuǎn)到綁定支付頁(yè)面
cookie 天生就是最適合做認(rèn)證趣钱，除了你提出的能否設(shè)置過(guò)期時(shí)間上的區(qū)別， cookie 和 localStorage 最大的區(qū)別是：每次 request 都會(huì)自動(dòng)在 header 中帶上所有的 cookie胚宦。所以如果你為了鑒權(quán)首有，設(shè)置很多 cookie ，還會(huì)引發(fā)一個(gè)問(wèn)題就是枢劝，每次 request 的包都會(huì)很大井联。
我的解決方案很簡(jiǎn)單：鑒權(quán)就應(yīng)該交給后端去做。無(wú)論你多么細(xì)心的在 client 中維護(hù)用戶(hù)權(quán)限標(biāo)識(shí)您旁，都需要確保一點(diǎn)：用戶(hù)的真實(shí)權(quán)限是否保持同步烙常？所以你還是需要向后端查詢(xún)用戶(hù)權(quán)限設(shè)置，干嘛不簡(jiǎn)單些：
用戶(hù)認(rèn)證之后鹤盒，后端鑒權(quán)蚕脏，提示是否跳轉(zhuǎn)，或者干脆在 header 頭中設(shè)置跳轉(zhuǎn)鏈接昨悼。
首先蝗锥，是登錄信息：
登錄信息存在 cookie 中是一直以來(lái)的做法，而且實(shí)現(xiàn)的很好率触，不用考慮各種問(wèn)題终议。
而 localStorage 是在這個(gè) API 誕生之后，一些 JS 黨帶起來(lái)的另一種實(shí)現(xiàn)方式葱蝗。
使用 localStorage穴张，你需要在每次請(qǐng)求的時(shí)候，都手動(dòng)帶上這個(gè)信息两曼，這大大增加了開(kāi)發(fā)過(guò)程中帶來(lái)的困難皂甘，非常麻煩，而且還要手動(dòng)維護(hù)過(guò)期時(shí)間悼凑。
而使用 cookie 的話偿枕，只需要在后端的 Auth 模塊放個(gè)設(shè)置 header 的代碼即可璧瞬，其他完全不用考慮。為什么：
用戶(hù)未登錄的情況下渐夸，Auth 判斷沒(méi)有權(quán)限嗤锉，設(shè)置個(gè)跳轉(zhuǎn)到登錄頁(yè)（或者是其他邏輯，比如以訪客身份瀏覽之類(lèi)的）
用戶(hù)登錄時(shí)：將賬號(hào)和密碼 POST 到 Auth 模塊后墓塌，Auth 設(shè)置一個(gè) header瘟忱，設(shè)置 Cookie 及過(guò)期時(shí)間
用戶(hù)登錄后，在 Cookie 的有效期內(nèi)（設(shè)置了過(guò)期時(shí)間就是過(guò)期時(shí)間內(nèi)苫幢，沒(méi)設(shè)置就是瀏覽器關(guān)閉前）访诱，任何請(qǐng)求都會(huì)自動(dòng)帶上 cookie，完全不用人工干預(yù)（fetch 請(qǐng)求除外韩肝，需要額外指定配置）
在用戶(hù)自動(dòng)帶上 cookie 請(qǐng)求后触菜，需要授權(quán)的請(qǐng)求一定會(huì)經(jīng)過(guò) Auth 模塊，判斷 cookie 是否有效（防止惡意無(wú)效的 cookie）伞梯，若 cookie 無(wú)效玫氢，則設(shè)置 header 刪除 cookie（可選步驟），并將用戶(hù)重定向到登錄頁(yè)谜诫。若 cookie 有效漾峡，則設(shè)置 header，為 cookie 續(xù)期（cookie 內(nèi)容都可以完全不變）喻旷。
Auth 模塊：if(POST 方法請(qǐng)求登錄) {if(賬號(hào)密碼不正確) {return重定向到登錄頁(yè)面生逸，并提示錯(cuò)誤? }? 設(shè)置 cookie，并指定過(guò)期時(shí)間為當(dāng)前時(shí)間 +n 天returnAuth 模塊邏輯結(jié)束且预，進(jìn)入其他模塊邏輯}if(沒(méi)有 cookie) {return重定向到登錄頁(yè)面}if(cookie 無(wú)效) {// 可選步驟：設(shè)置 cookie 過(guò)期時(shí)間為 -1 （刪除 cookie）return重定向到登錄頁(yè)面}// 帶了有效的 cookie設(shè)置 cookie 過(guò)期時(shí)間為當(dāng)前時(shí)間 +n 天（為 cookie 續(xù)期）returnAuth 模塊邏輯結(jié)束槽袄，進(jìn)入其他模塊邏輯
注意：只有請(qǐng)求 Auth 模塊才會(huì)給 cookie 續(xù)期，其他模塊不續(xù)锋谐。所以權(quán)限認(rèn)證的模塊都統(tǒng)一到一起了
本文轉(zhuǎn)載于：https://www.cnblogs.com/leftJS/p/10927013.html遍尺；
分類(lèi)：HTML/CSS；
