真正的瀏覽器磁盤緩存 LocalStorage
前面我們學習了 cookie 和 sessionStorage，他們都具有存儲功能，但各有各的用途。今天我們學習 LocalStorage，它才是真正的緩存機制，也就是我們通常說的磁盤緩存，他可以做到在這些場景下數據丟失：
- 刷新頁面;
- 切換 tab;
- 關閉瀏覽器;
它和 sessionStorage 一樣，都是 Storage 的實例。要訪問同一 localStorage 的數據時，要保證協議、域名和端口都一致才能夠訪問。
它與 sessionStorage 使用一致：
- // 增加一條數據
- localStorage.setItem('name', '公眾號素燕');
- localStorage.setItem('logo', '前端小課， 幫助 10W 人入門并進階前端');
- // 獲取一條數據，key 為 name
- console.log(localStorage.getItem('name'));
- // 獲取第一條數據的 key
- console.log(localStorage.key(0));
- // 刪除一條數據，key 為 logo
- localStorage.removeItem('logo')
保存在 localStorage 的數據不會自動清除，除非通過代碼清除，或者清除瀏覽器的緩存。但是它又有限制，比如有些瀏覽器限制最大只能存儲 5MB。你可以在瀏覽器調試模式(Inspect)下打開的 Application -> Local Storage 中查看存儲的內容，也可以修改。
監聽事件
無論是 sessionStorage 還是 localStorage，當數據發生變化時都能夠監聽到，我們以 localStorage 為例來監聽一下 Storage 的事件。需要注意一點，這種事件監聽在同一頁面并不會監聽到事件。比如：
A頁面：
訪問 http://localhost:2081/cookie/cookie.html ，如果在這個頁面接收監聽到事件，必須在另一個同一地址的頁面進行修改 storage 才能觸發。在當前頁面修改 localStorage 即使頁面中加了監聽事件，也不會接收到事件。在 A 頁面中添加監聽事件：
- window.addEventListener('storage', event => {
- alert('change');
- console.log(event);
- });
B頁面：
訪問 http://localhost:2081/cookie/cookie.html ，如果對 localStorage 進行了修改，A頁面將收到 storage 被修改的事件。
- localStorage.setItem('name', '公眾號素燕');
- localStorage.clear();
- localStorage.removeItem('name');
同樣，監聽事件也適用于 sessionStorage。
