H5本地存儲(chǔ)有兩個(gè)API，一個(gè)是Web Storage蝴韭，還有一個(gè)是Web SQL够颠。不管是哪一個(gè)，都是基于JavaScript語(yǔ)言來(lái)使用榄鉴，而Web Storage提供了兩種存儲(chǔ)類型 API： sessionStorage 和 localStorage履磨，二者的差異主要是數(shù)據(jù)的保存時(shí)長(zhǎng)及數(shù)據(jù)的共享方式。
WebStorage的目的是克服由cookie所帶來(lái)的一些限制庆尘，當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(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ǔ)）。
localStorage
localStorage生命周期是永久位岔，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息如筛，否則這些信息將永遠(yuǎn)存在。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存抒抬，不參與和服務(wù)器的通信杨刨。
sessionStorage
sessionStorage僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除擦剑。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存妖胀，不參與和服務(wù)器的通信。
localStorage和sessionStorage使用時(shí)使用相同的API：
localStorage.setItem("key","value");//以“key”為名稱存儲(chǔ)一個(gè)值“value”
localStorage.getItem("key");//獲取名稱為“key”的值
localStorage.removeItem("key");//刪除名稱為“key”的信息惠勒。
localStorage.clear();?//清空l(shuí)ocalStorage中所有信息
在H5中赚抡，window對(duì)象里面有一個(gè)storage事件，我們可以進(jìn)行監(jiān)聽或者指定其事件處理函數(shù)的方法纠屋，在其他頁(yè)面修改了sessionstorage或者localstorage中的值時(shí)涂臣，就會(huì)觸發(fā)注冊(cè)了storage事件。
我們先看一下幾個(gè)屬性：
1售担、event.key 屬性：屬性值為在 session 或 localStorage 中被修改的數(shù)據(jù)鍵值赁遗。
2、event.oldValue 屬性：屬性值為在 sessionStorage 或 localStorage 中被修改的值族铆。
3岩四、event.newValue 屬性：屬性值為在 sessionStorage 或 localStorage 中被修改后的值
4、event.url 屬性：屬性值為修改 sessionStorage 或 localStorage 中值的頁(yè)面的URL地址
5哥攘、event.storageArea 屬性 : 屬性值為被變動(dòng)的 sessionStorage 對(duì)象或 localStorage 對(duì)象
localStorage的監(jiān)聽：
<script>
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.key = key;
setItemEvent.newValue = newValue;
setItemEvent.oldValue = localStorage.getItem(key);
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
console.log('key: '+e.key);
console.log('newValue: '+e.newValue);
console.log('oldValue: '+e.oldValue);
});
localStorage.setItem("nm","1234");
</script>
localStorage和sessionStorage的優(yōu)缺點(diǎn)
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è)瀏覽器窗口沒有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面邦邦，數(shù)據(jù)依然存在安吁。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁(yè)面燃辖，sessionStorage也是不一樣的鬼店。
2、存儲(chǔ)大星辍：localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是：5MB
3妇智、存儲(chǔ)位置：localStorage和sessionStorage都保存在客戶端，不與服務(wù)器進(jìn)行交互通信氏身。
4巍棱、存儲(chǔ)內(nèi)容類型：localStorage和sessionStorage只能存儲(chǔ)字符串類型，對(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)期登錄（+判斷用戶是否已登錄）到踏，適合長(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ù)器，所以減少了客戶端和服務(wù)器端的交互缠劝，節(jié)省了網(wǎng)絡(luò)流量潮梯；
（3）對(duì)于那種只需要在用戶瀏覽一組頁(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)心截獲帆竹，但是仍然存在偽造問題；
（6）WebStorage提供了一些方法脓规，數(shù)據(jù)操作比cookie方便栽连；
setItem (key, value) —— 保存數(shù)據(jù)，以鍵值對(duì)的方式儲(chǔ)存信息侨舆。
getItem (key) —— 獲取數(shù)據(jù)秒紧，將鍵值傳入，即可獲取到對(duì)應(yīng)的value值挨下。
removeItem (key) —— 刪除單個(gè)數(shù)據(jù)熔恢，根據(jù)鍵值移除對(duì)應(yīng)的信息。
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key
cookie和session
cookie和session都是用來(lái)跟蹤瀏覽器用戶身份的會(huì)話方式臭笆。
cookie和session
（1）cookie機(jī)制：如果不在瀏覽器中設(shè)置過(guò)期時(shí)間叙淌，cookie被保存在內(nèi)存中，生命周期隨瀏覽器的關(guān)閉而結(jié)束愁铺，這種cookie簡(jiǎn)稱會(huì)話cookie鹰霍。如果在瀏覽器中設(shè)置了cookie的過(guò)期時(shí)間，cookie被保存在硬盤中茵乱，關(guān)閉瀏覽器后衅谷，cookie數(shù)據(jù)仍然存在，直到過(guò)期時(shí)間結(jié)束才消失似将。
Cookie是服務(wù)器發(fā)給客戶端的特殊信息获黔，cookie是以文本的方式保存在客戶端，每次請(qǐng)求時(shí)都帶上它
Cookie cookie = new Cookie("username","helloweenvsfei"); // 新建Cookie
cookie.setMaxAge(int maxAge); // maxAge為正代表其在maxAge秒后自動(dòng)消失在验，
//maxAge為負(fù)則表示該Cookie僅在本瀏覽器窗口以及本窗口打開的子窗口內(nèi)有效玷氏，關(guān)閉窗口后該Cookie即失效。
// 如果maxAge為0腋舌，則表示刪除該Cookie盏触。
cookie.setDomain(".helloweenvsfei.com"); // 設(shè)置域名 Cookie是不可跨域名的。
//domain參數(shù)必須以點(diǎn)(".")開始块饺。
cookie.setPath("/"); // 設(shè)置路徑
cookie.setSecure(true); // 設(shè)置安全屬性可以設(shè)置Cookie的secure屬性為true赞辩。
//瀏覽器只會(huì)在HTTPS和SSL等安全協(xié)議中傳輸此類Cookie。
response.addCookie(cookie); // 輸出到客戶端
使用時(shí)一定要注意授艰。
domain表示的是cookie所在的域辨嗽，默認(rèn)為請(qǐng)求的地址，如網(wǎng)址為www.test.com/test/test.aspx淮腾，那么domain默認(rèn)為www.test.com糟需。而跨域訪問屉佳，如域A為t1.test.com，域B為t2.test.com洲押，那么在域A生產(chǎn)一個(gè)令域A和域B都能訪問的cookie就要將該cookie的domain設(shè)置為.test.com武花；如果要在域A生產(chǎn)一個(gè)令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設(shè)置為t2.test.com。
path表示cookie所在的目錄杈帐，默認(rèn)為/体箕，就是根目錄。在同一個(gè)服務(wù)器上有目錄如下：/test/,/test/cd/,/test/dd/挑童，現(xiàn)設(shè)一個(gè)cookie1的path為/test/干旁，cookie2的path為/test/cd/，那么test下的所有頁(yè)面都可以訪問到cookie1炮沐，而/test/和/test/dd/的子頁(yè)面不能訪問cookie2争群。這是因?yàn)閏ookie能讓其path路徑下的頁(yè)面訪問。
瀏覽器會(huì)將domain和path都相同的cookie保存在一個(gè)文件里大年，cookie間用*隔開
（2）session機(jī)制：當(dāng)服務(wù)器收到請(qǐng)求需要?jiǎng)?chuàng)建session對(duì)象時(shí)换薄，首先會(huì)檢查客戶端請(qǐng)求中是否包含sessionid。如果有sessionid翔试，服務(wù)器將根據(jù)該id返回對(duì)應(yīng)session對(duì)象轻要。如果客戶端請(qǐng)求中沒有sessionid，服務(wù)器會(huì)創(chuàng)建新的session對(duì)象垦缅，并把sessionid在本次響應(yīng)中返回給客戶端冲泥。通常使用cookie方式存儲(chǔ)sessionid到客戶端，在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器壁涎。如果用戶禁用cookie凡恍，則要使用URL重寫，可以通過(guò)response.encodeURL(url) 進(jìn)行實(shí)現(xiàn)怔球；API對(duì)encodeURL的結(jié)束為嚼酝，當(dāng)瀏覽器支持Cookie時(shí)，url不做任何處理竟坛；當(dāng)瀏覽器不支持Cookie的時(shí)候闽巩，將會(huì)重寫URL將SessionID拼接到訪問地址后。
3担汤、存儲(chǔ)內(nèi)容：cookie只能保存字符串類型涎跨，以文本的方式；session通過(guò)類似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來(lái)保存崭歧，能支持任何類型的對(duì)象(session中可含有多個(gè)對(duì)象)
4隅很、存儲(chǔ)的大小：cookie：?jiǎn)蝹€(gè)cookie保存的數(shù)據(jù)不能超過(guò)4kb驾荣；session大小沒有限制外构。
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）判斷用戶是否登陸過(guò)網(wǎng)站超棺，以便下次登錄時(shí)能夠?qū)崿F(xiàn)自動(dòng)登錄（或者記住密碼）。如果我們刪除cookie呵燕，則每次登錄必須從新填寫登錄的相關(guān)信息棠绘。
（2）保存上次登錄的時(shí)間等信息。
（3）保存上次查看的頁(yè)面
（4）瀏覽計(jì)數(shù)
session：Session用于保存每個(gè)用戶的專用信息再扭，變量的值保存在服務(wù)器端氧苍，通過(guò)SessionID來(lái)區(qū)分不同的客戶。
（1）網(wǎng)上商城中的購(gòu)物車
（2）保存用戶登錄信息
（3）將某些數(shù)據(jù)放入session中泛范，供同一用戶的不同頁(yè)面使用
（4）防止用戶非法登錄
7候引、缺點(diǎn)：cookie：（1）大小受限
（2）用戶可以操作（禁用）cookie，使功能受限
（3）安全性較低
（4）有些狀態(tài)不可能保存在客戶端敦跌。
（5）每次訪問都要傳送cookie給服務(wù)器澄干，浪費(fèi)帶寬。
（6）cookie數(shù)據(jù)有路徑（path）的概念柠傍，可以限制cookie只屬于某個(gè)路徑下麸俘。
session：（1）Session保存的東西越多，就越占用服務(wù)器內(nèi)存惧笛，對(duì)于用戶在線人數(shù)較多的網(wǎng)站从媚，服務(wù)器的內(nèi)存壓力會(huì)比較大。
（2）依賴于cookie（sessionID保存在cookie）患整，如果禁用cookie拜效，則要使用URL重寫喷众，不安全
（3）創(chuàng)建Session變量有很大的隨意性，可隨時(shí)調(diào)用紧憾，不需要開發(fā)者做精確地處理到千，所以，過(guò)度使用session變量將會(huì)導(dǎo)致代碼不可讀而且不好維護(hù)赴穗。
localStorage進(jìn)行緩存
LS使用：（http://www.reibang.com/p/0fa0bf842bbb）
PC上應(yīng)用價(jià)值不大：
兼容性不太好憔四，不支持LS的瀏覽器比例仍然很大
網(wǎng)絡(luò)速度快，協(xié)商緩存響應(yīng)快般眉，LS讀取+eval很多時(shí)候會(huì)比不上304
通常需要SEO了赵，導(dǎo)致css不能緩存，僅緩存js使得整個(gè)緩存方案意義進(jìn)一步減小
瀏覽器本地緩存足夠可靠持久
跨頁(yè)面間共享緩存即便有浪費(fèi)也差別不大
移動(dòng)端webapp值得一試：
兼容性好
網(wǎng)速慢甸赃，LS讀取+eval大多數(shù)情況下快于304
webapp不需要seo柿汛，css也可以緩存，再通過(guò)js加載
瀏覽器緩存經(jīng)常會(huì)被清理埠对，LS被清理的幾率低一些
取出localstorage的代碼不一定要eval苛茂，eval函數(shù)很有可能影響整個(gè)js文件的壓縮（出現(xiàn)eval之后不能對(duì)變量名進(jìn)行替換）,可以通過(guò)一些hack避免這種壓縮問題。
LS問題還是有的鸠窗。https://www.zhihu.com/question/28467444
1妓羊、Safari 處于隱私模式時(shí)，LS set 數(shù)據(jù)會(huì)拋異常
2稍计、不同移動(dòng)端瀏覽器躁绸，對(duì)單次set數(shù)據(jù)大小是有區(qū)別的，3-5M
3臣嚣、不同移動(dòng)端瀏覽器對(duì)LS總?cè)萘看笮∈怯袇^(qū)別的净刮，5-10M
localStorage與cookie解決跨域問題
https://www.haorooms.com/post/kuayu_localstorage_cookie//cookie跨域解決方案
https://blog.csdn.net/sflf36995800/article/details/53290457//localstorage跨域解決方案
