HTML5提供了兩種本地存儲的方式 sessionStorage 和 localStorage
sessionStorage
sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 localStorage 里面存儲的數(shù)據(jù)沒有過期時間設(shè)置，而存儲在 sessionStorage 里面的數(shù)據(jù)在頁面會話結(jié)束(刷新 or 關(guān)閉tab)時會被清除。
// 保存數(shù)據(jù)到 sessionStorage
sessionStorage.setItem('key', 'value');
// 從 sessionStorage 獲取數(shù)據(jù)
let data = sessionStorage.getItem('key');
// 從 sessionStorage 刪除保存的數(shù)據(jù)
sessionStorage.removeItem('key');
// 從 sessionStorage 刪除所有保存的數(shù)據(jù)
sessionStorage.clear();
loaclStorage
// 保存數(shù)據(jù)到 localStorage
localStorage.setItem('myCat', 'Tom');
// 從 localStorage獲取數(shù)據(jù)
localStorage.getItem('myCat');
// 從 localStorage刪除保存的數(shù)據(jù)
localStorage.removeItem('myCat');
//從 localStorage刪除所有保存的數(shù)據(jù)
localStorage.clear();
在兩個頁面中使用localStorage
在A頁面監(jiān)聽localStorage的變化：
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<script>
window.addEventListener("storage", function (e) {
alert(e.newValue);
});
</script>
</body>
</html>
在B頁面
<!DOCTYPE html>
<html>
<head lang="en">
<title>B</title>
</head>
<body>
<script>
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body>
</html>
注意兩個頁面要同源，運(yùn)行結(jié)果是A頁面會彈出內(nèi)容。
在一個頁面中使用localStorage
重寫localStorage的方法，拋出自定義事件
<!DOCTYPE html>
<html>
<head lang="en">
<title>A</title>
</head>
<body>
<script>
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
localStorage.setItem("nm","1234");
</script>
</body>
</html>
cookie
HTTP Cookie（也叫Web Cookie或?yàn)g覽器Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)，它會在瀏覽器下次向同一服務(wù)器再發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上。通常，它用于告知服務(wù)端兩個請求是否來自同一瀏覽器，如保持用戶的登錄狀態(tài)。Cookie使基于無狀態(tài)的HTTP協(xié)議記錄穩(wěn)定的狀態(tài)信息成為了可能。
Cookie主要用于以下三個方面：
- 會話狀態(tài)管理（如用戶登錄狀態(tài)、購物車、游戲分?jǐn)?shù)或其它需要記錄的信息）
- 個性化設(shè)置（如用戶自定義設(shè)置、主題等）
- 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）
JavaScript通過Document.cookies訪問Cookie
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"
Cookie曾一度用于客戶端數(shù)據(jù)的存儲，因當(dāng)時并沒有其它合適的存儲辦法而作為唯一的存儲手段，但現(xiàn)在隨著現(xiàn)代瀏覽器開始支持各種各樣的存儲方式，Cookie漸漸被淘汰。由于服務(wù)器指定Cookie后，瀏覽器的每次請求都會攜帶Cookie數(shù)據(jù)，會帶來額外的性能開銷（尤其是在移動環(huán)境下）。新的瀏覽器API已經(jīng)允許開發(fā)者直接將數(shù)據(jù)存儲到本地，如使用 Web storage API （本地存儲和會話存儲）或 IndexedDB 。
三者異同
三者都遵循瀏覽器的同源策略（相同的協(xié)議、相同的主機(jī)名、相同的端口下）
localStorage只要在相同的協(xié)議、相同的主機(jī)名、相同的端口下，就能讀取/修改到同一份localStorage數(shù)據(jù)。
sessionStorage比localStorage更嚴(yán)苛一點(diǎn)，除了協(xié)議、主機(jī)名、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下。
生命周期：
cookie：可設(shè)置失效時間，沒有設(shè)置的話，默認(rèn)是關(guān)閉瀏覽器后失效
localStorage：除非被手動清除，否則將會永久保存。
sessionStorage： 僅在當(dāng)前網(wǎng)頁會話下有效，關(guān)閉頁面或?yàn)g覽器后就會被清除。
localStorage理論上來說是永久有效的，即不主動清空的話就不會消失，即使保存的數(shù)據(jù)超出了瀏覽器所規(guī)定的大小，也不會把舊數(shù)據(jù)清空而只會報錯。但需要注意的是，在移動設(shè)備上的瀏覽器或各Native App用到的WebView里，localStorage都是不可靠的，可能會因?yàn)楦鞣N原因（比如說退出App、網(wǎng)絡(luò)切換、內(nèi)存不足等原因）被清空。
sessionStorage的生存期顧名思義，類似于session，只要關(guān)閉瀏覽器（也包括瀏覽器的標(biāo)簽頁），就會被清空。由于sessionStorage的生存期太短，因此應(yīng)用場景很有限，但從另一方面來看，不容易出現(xiàn)異常情況，比較可靠。
存放數(shù)據(jù)大?。?/h3>
cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。
http請求：
cookie：每次都會攜帶在HTTP頭中，如果使用cookie保存過多數(shù)據(jù)會帶來性能問題
localStorage和sessionStorage：僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信
易用性：
cookie：需要程序員自己封裝，原生的Cookie接口不友好
localStorage和sessionStorage：原生接口可以接受，亦可再次封裝來對Object和Array有更好的支持
參考：
cookie、localStorage和sessionStorage 三者之間的區(qū)別、
localstorage 必知必會
MDN文檔
h5 storage事件監(jiān)聽
