[[349227]]

前面我們學(xué)習(xí)了 cookie 和 sessionStorage，他們都具有存儲(chǔ)功能，但各有各的用途。今天我們學(xué)習(xí) LocalStorage，它才是真正的緩存機(jī)制，也就是我們通常說(shuō)的磁盤(pán)緩存，他可以做到在這些場(chǎng)景下數(shù)據(jù)丟失：

• 刷新頁(yè)面;
• 切換 tab;
• 關(guān)閉瀏覽器;

它和 sessionStorage 一樣，都是 Storage 的實(shí)例。要訪問(wèn)同一 localStorage 的數(shù)據(jù)時(shí)，要保證協(xié)議、域名和端口都一致才能夠訪問(wèn)。

它與 sessionStorage 使用一致：

// 增加一條數(shù)據(jù) 
localStorage.setItem('name', '公眾號(hào)素燕'); 
localStorage.setItem('logo', '前端小課， 幫助 10W 人入門(mén)并進(jìn)階前端'); 
 
// 獲取一條數(shù)據(jù)，key 為 name 
console.log(localStorage.getItem('name')); 
// 獲取第一條數(shù)據(jù)的 key 
console.log(localStorage.key(0)); 
// 刪除一條數(shù)據(jù)，key 為 logo 
localStorage.removeItem('logo') 

保存在 localStorage 的數(shù)據(jù)不會(huì)自動(dòng)清除，除非通過(guò)代碼清除，或者清除瀏覽器的緩存。但是它又有限制，比如有些瀏覽器限制最大只能存儲(chǔ) 5MB。你可以在瀏覽器調(diào)試模式(Inspect)下打開(kāi)的 Application -> Local Storage 中查看存儲(chǔ)的內(nèi)容，也可以修改。

監(jiān)聽(tīng)事件

無(wú)論是 sessionStorage 還是 localStorage，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)都能夠監(jiān)聽(tīng)到，我們以 localStorage 為例來(lái)監(jiān)聽(tīng)一下 Storage 的事件。需要注意一點(diǎn)，這種事件監(jiān)聽(tīng)在同一頁(yè)面并不會(huì)監(jiān)聽(tīng)到事件。比如：

A頁(yè)面：

訪問(wèn) http://localhost:2081/cookie/cookie.html ，如果在這個(gè)頁(yè)面接收監(jiān)聽(tīng)到事件，必須在另一個(gè)同一地址的頁(yè)面進(jìn)行修改 storage 才能觸發(fā)。在當(dāng)前頁(yè)面修改 localStorage 即使頁(yè)面中加了監(jiān)聽(tīng)事件，也不會(huì)接收到事件。在 A 頁(yè)面中添加監(jiān)聽(tīng)事件：

window.addEventListener('storage', event => { 
    alert('change'); 
    console.log(event); 
}); 

B頁(yè)面：

訪問(wèn) http://localhost:2081/cookie/cookie.html ，如果對(duì) localStorage 進(jìn)行了修改，A頁(yè)面將收到 storage 被修改的事件。

localStorage.setItem('name', '公眾號(hào)素燕'); 
localStorage.clear(); 
localStorage.removeItem('name'); 

同樣，監(jiān)聽(tīng)事件也適用于 sessionStorage。