H5本地存儲有兩個API，一個是Web Storage，還有一個是Web SQL。不管是哪一個，都是基于JavaScript語言來使用，而Web Storage提供了兩種存儲類型 API： sessionStorage 和 localStorage，二者的差異主要是數(shù)據(jù)的保存時長及數(shù)據(jù)的共享方式。
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（會話存儲）。

localStorage

localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

sessionStorage

sessionStorage僅在當(dāng)前會話下有效，關(guān)閉頁面或?yàn)g覽器后被清除。存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

localStorage和sessionStorage使用時使用相同的API：

 localStorage.setItem("key","value");//以“key”為名稱存儲一個值“value”

 localStorage.getItem("key");//獲取名稱為“key”的值

 localStorage.removeItem("key");//刪除名稱為“key”的信息。

 localStorage.clear();?//清空localStorage中所有信息

在H5中，window對象里面有一個storage事件，我們可以進(jìn)行監(jiān)聽或者指定其事件處理函數(shù)的方法，在其他頁面修改了sessionstorage或者localstorage中的值時，就會觸發(fā)注冊了storage事件。

我們先看一下幾個屬性：
1、event.key 屬性：屬性值為在 session 或 localStorage 中被修改的數(shù)據(jù)鍵值。

2、event.oldValue 屬性：屬性值為在 sessionStorage 或 localStorage 中被修改的值。

3、event.newValue 屬性：屬性值為在 sessionStorage 或 localStorage 中被修改后的值

4、event.url 屬性：屬性值為修改 sessionStorage 或 localStorage 中值的頁面的URL地址

5、event.storageArea 屬性 : 屬性值為被變動的 sessionStorage 對象或 localStorage 對象

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à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

cookie和session

cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式。

cookie和session

（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是以文本的方式保存在客戶端，每次請求時都帶上它

Cookie cookie = new Cookie("username","helloweenvsfei"); // 新建Cookie
cookie.setMaxAge(int maxAge); // maxAge為正代表其在maxAge秒后自動消失，
//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。
//瀏覽器只會在HTTPS和SSL等安全協(xié)議中傳輸此類Cookie。
response.addCookie(cookie); // 輸出到客戶端

使用時一定要注意。

• domain表示的是cookie所在的域，默認(rèn)為請求的地址，如網(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)一個令域A和域B都能訪問的cookie就要將該cookie的domain設(shè)置為.test.com；如果要在域A生產(chǎn)一個令域A不能訪問而域B能訪問的cookie就要將該cookie的domain設(shè)置為t2.test.com。

• path表示cookie所在的目錄，默認(rèn)為/，就是根目錄。在同一個服務(wù)器上有目錄如下：/test/,/test/cd/,/test/dd/，現(xiàn)設(shè)一個cookie1的path為/test/，cookie2的path為/test/cd/，那么test下的所有頁面都可以訪問到cookie1，而/test/和/test/dd/的子頁面不能訪問cookie2。這是因?yàn)閏ookie能讓其path路徑下的頁面訪問。

• 瀏覽器會將domain和path都相同的cookie保存在一個文件里，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）瀏覽計(jì)數(shù)

image.png

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ù)。

localStorage進(jìn)行緩存

LS使用：（http://www.itdecent.cn/p/0fa0bf842bbb）

PC上應(yīng)用價(jià)值不大：
兼容性不太好，不支持LS的瀏覽器比例仍然很大

網(wǎng)絡(luò)速度快，協(xié)商緩存響應(yīng)快，LS讀取+eval很多時候會比不上304

通常需要SEO，導(dǎo)致css不能緩存，僅緩存js使得整個緩存方案意義進(jìn)一步減小

瀏覽器本地緩存足夠可靠持久

跨頁面間共享緩存即便有浪費(fèi)也差別不大

移動端webapp值得一試：
兼容性好

網(wǎng)速慢，LS讀取+eval大多數(shù)情況下快于304

webapp不需要seo，css也可以緩存，再通過js加載

瀏覽器緩存經(jīng)常會被清理，LS被清理的幾率低一些

取出localstorage的代碼不一定要eval，eval函數(shù)很有可能影響整個js文件的壓縮（出現(xiàn)eval之后不能對變量名進(jìn)行替換）,可以通過一些hack避免這種壓縮問題。

LS問題還是有的。https://www.zhihu.com/question/28467444

1、Safari 處于隱私模式時，LS set 數(shù)據(jù)會拋異常

2、不同移動端瀏覽器，對單次set數(shù)據(jù)大小是有區(qū)別的，3-5M

3、不同移動端瀏覽器對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跨域解決方案