瀏覽器的緩存機(jī)制提供了可以將用戶數(shù)據(jù)存儲在客戶端上的方式捻浦，可以利用cookie,session等跟服務(wù)端進(jìn)行數(shù)據(jù)交互绝淡。
一、cookie和session
cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。
區(qū)別：
1搪锣、保持狀態(tài)：cookie保存在瀏覽器端，session保存在服務(wù)器端
2彩掐、使用方式：
（1）cookie機(jī)制：如果不在瀏覽器中設(shè)置過期時間构舟，cookie被保存在內(nèi)存中，生命周期隨瀏覽器的關(guān)閉而結(jié)束堵幽，這種cookie簡稱會話cookie狗超。如果在瀏覽器中設(shè)置了cookie的過期時間，cookie被保存在硬盤中朴下，關(guān)閉瀏覽器后努咐，cookie數(shù)據(jù)仍然存在，直到過期時間結(jié)束才消失殴胧。
? ? ?Cookie是服務(wù)器發(fā)給客戶端的特殊信息渗稍，cookie是以文本的方式保存在客戶端，每次請求時都帶上它
（2）session機(jī)制：當(dāng)服務(wù)器收到請求需要創(chuàng)建session對象時团滥，首先會檢查客戶端請求中是否包含sessionid竿屹。如果有sessionid，服務(wù)器將根據(jù)該id返回對應(yīng)session對象灸姊。如果客戶端請求中沒有sessionid拱燃，服務(wù)器會創(chuàng)建新的session對象，并把sessionid在本次響應(yīng)中返回給客戶端力惯。通常使用cookie方式存儲sessionid到客戶端碗誉，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器。如果用戶禁用cookie父晶，則要使用URL重寫诗充，可以通過response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)；API對encodeURL的結(jié)束為诱建，當(dāng)瀏覽器支持Cookie時蝴蜓，url不做任何處理；當(dāng)瀏覽器不支持Cookie的時候，將會重寫URL將SessionID拼接到訪問地址后茎匠。
3格仲、存儲內(nèi)容：cookie只能保存字符串類型，以文本的方式诵冒；session通過類似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來保存凯肋，能支持任何類型的對象(session中可含有多個對象)
4、存儲的大衅觥：cookie：單個cookie保存的數(shù)據(jù)不能超過4kb侮东；session大小沒有限制。
5豹芯、安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙悄雅，Cookie截獲；session的安全性大于cookie铁蹈。
原因如下：（1）sessionID存儲在cookie中宽闲，若要攻破session首先要攻破cookie；
∥漳痢（2）sessionID是要有人登錄容诬，或者啟動session_start才會有，所以攻破cookie也不一定能得到sessionID沿腰；
±劳健（3）第二次啟動session_start后，前一次的sessionID就是失效了颂龙，session過期后吱殉，sessionID也隨之失效。
±逋小（4）sessionID是加密的
（5）綜上所述稿湿，攻擊者必須在短時間內(nèi)攻破加密的sessionID铅匹，這很難。
6饺藤、應(yīng)用場景：
cookie：（1）判斷用戶是否登陸過網(wǎng)站包斑，以便下次登錄時能夠?qū)崿F(xiàn)自動登錄（或者記住密碼）。如果我們刪除cookie涕俗，則每次登錄必須從新填寫登錄的相關(guān)信息罗丰。
（2）保存上次登錄的時間等信息再姑。
∶鹊帧（3）保存上次查看的頁面
（4）瀏覽計數(shù)
session：Session用于保存每個用戶的專用信息，變量的值保存在服務(wù)器端绍填，通過SessionID來區(qū)分不同的客戶霎桅。
（1）網(wǎng)上商城中的購物車
√钟馈（2）保存用戶登錄信息
√鲜弧（3）將某些數(shù)據(jù)放入session中，供同一用戶的不同頁面使用
∏淠帧（4）防止用戶非法登錄
7揭糕、缺點(diǎn)：cookie：（1）大小受限
（2）用戶可以操作（禁用）cookie锻霎，使功能受限
≈恰（3）安全性較低
（4）有些狀態(tài)不可能保存在客戶端量窘。
（5）每次訪問都要傳送cookie給服務(wù)器雇寇，浪費(fèi)帶寬。
“鐾（6）cookie數(shù)據(jù)有路徑（path）的概念锨侯，可以限制cookie只屬于某個路徑下。
session：（1）Session保存的東西越多冬殃，就越占用服務(wù)器內(nèi)存囚痴，對于用戶在線人數(shù)較多的網(wǎng)站，服務(wù)器的內(nèi)存壓力會比較大审葬。
∩罟觥（2）依賴于cookie（sessionID保存在cookie），如果禁用cookie涣觉，則要使用URL重寫痴荐，不安全
（3）創(chuàng)建Session變量有很大的隨意性官册，可隨時調(diào)用生兆，不需要開發(fā)者做精確地處理，所以膝宁，過度使用session變量將會導(dǎo)致代碼不可讀而且不好維護(hù)鸦难。
二、WebStorage
WebStorage的目的是克服由cookie所帶來的一些限制员淫，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時合蔽，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。
WebStorage兩個主要目標(biāo)：（1）提供一種在cookie之外存儲會話數(shù)據(jù)的路徑介返。（2）提供一種存儲大量可以跨會話存在的數(shù)據(jù)的機(jī)制拴事。
HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）沃斤。
1、生命周期：localStorage:localStorage的生命周期是永久的挤聘，關(guān)閉頁面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會消失轰枝。localStorage除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會消失组去。
?sessionStorage的生命周期是在僅在當(dāng)前會話下有效鞍陨。sessionStorage引入了一個“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)从隆。只要這個瀏覽器窗口沒有關(guān)閉诚撵，即使刷新頁面或者進(jìn)入同源另一個頁面，數(shù)據(jù)依然存在键闺。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀寿烟。同時獨(dú)立的打開同一個窗口同一個頁面，sessionStorage也是不一樣的辛燥。
2筛武、存儲大小：localStorage和sessionStorage的存儲數(shù)據(jù)大小一般都是：5MB
3挎塌、存儲位置：localStorage和sessionStorage都保存在客戶端徘六，不與服務(wù)器進(jìn)行交互通信。
4榴都、存儲內(nèi)容類型：localStorage和sessionStorage只能存儲字符串類型待锈，對于復(fù)雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
5、獲取方式：localStorage：window.localStorage;嘴高；sessionStorage：window.sessionStorage;竿音。
6、應(yīng)用場景：localStoragese：常用于長期登錄（+判斷用戶是否已登錄）拴驮，適合長期保存在本地的數(shù)據(jù)春瞬。sessionStorage：敏感賬號一次性登錄；
WebStorage的優(yōu)點(diǎn)：
（1）存儲空間更大：cookie為4KB套啤，而WebStorage是5MB宽气；
（2）節(jié)省網(wǎng)絡(luò)流量：WebStorage不會傳送到服務(wù)器，存儲在本地的數(shù)據(jù)可以直接獲取纲岭，也不會像cookie一樣美詞請求都會傳送到服務(wù)器，所以減少了客戶端和服務(wù)器端的交互线罕，節(jié)省了網(wǎng)絡(luò)流量止潮；
（3）對于那種只需要在用戶瀏覽一組頁面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù)，sessionStorage會非常方便钞楼；
（4）快速顯示：有的數(shù)據(jù)存儲在WebStorage上喇闸，再加上瀏覽器本身的緩存。獲取數(shù)據(jù)時可以從本地獲取會比從服務(wù)器端獲取快得多，所以速度更快燃乍；
（5）安全性：WebStorage不會隨著HTTP header發(fā)送到服務(wù)器端唆樊，所以安全性相對于cookie來說比較高一些，不會擔(dān)心截獲刻蟹，但是仍然存在偽造問題逗旁；
（6）WebStorage提供了一些方法，數(shù)據(jù)操作比cookie方便舆瘪；
setItem (key, value) —— ?保存數(shù)據(jù)片效，以鍵值對的方式儲存信息。
? ? ? ?getItem (key) —— ?獲取數(shù)據(jù)英古，將鍵值傳入淀衣，即可獲取到對應(yīng)的value值。
? ? ? ? removeItem (key) —— ?刪除單個數(shù)據(jù)召调，根據(jù)鍵值移除對應(yīng)的信息膨桥。
? ? ? ? clear () —— ?刪除所有的數(shù)據(jù)
? ? ? ? key (index) —— 獲取某個索引的key
