[[349227]]

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

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

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

它與 sessionStorage 使用一致：

// 增加一條數(shù)據(jù) 
localStorage.setItem('name', '公眾號素燕'); 
localStorage.setItem('logo', '前端小課， 幫助 10W 人入門并進(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ù)不會自動清除，除非通過代碼清除，或者清除瀏覽器的緩存。但是它又有限制，比如有些瀏覽器限制最大只能存儲 5MB。你可以在瀏覽器調(diào)試模式(Inspect)下打開的 Application -> Local Storage 中查看存儲的內(nèi)容，也可以修改。

監(jiān)聽事件

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

A頁面：

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

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

B頁面：

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

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

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