localStorage 的相關應用

localStorage 是瀏覽器自帶的一個屬性，只讀的 localStorage 屬性允許你訪問一個 Document 源（origin）的對象 Storage；存儲的數據將保存在瀏覽器會話中。localStorage 類似 sessionStorage，但其區別在於：存儲在 localStorage 的數據可以長期保留；而當頁面會話結束 —— 也就是說，當頁面被關閉時，存儲在 sessionStorage 的數據會被清除。

應注意，無論數據存儲在 localStorage 還是 sessionStorage ，它們都特定於頁面的協議。

另外，localStorage 中的鍵值對總是以字符串的形式存儲。 (需要注意，和 js 對象相比，鍵值對總是以字符串的形式存儲意味著數值類型會自動轉化為字符串類型).

localStorage 的使用也非常簡單，分為存入和讀取，可以將其綁定在事件方法中。

// 存入
const arr= 100;
localStorage.setItem("key", JSON.stringify(arr));

// 讀取
const arr = JSON.parse(localStorage.getItem("key"));

這裡 "key" 指的是存到瀏覽器中的參數名，arr 則是參數值。

localStorage.setItem("key", JSON.stringify(arr)); 這個方法就是將數組 arr 存到了瀏覽器的 localStorage 中，它的參數名叫 key
const arr = JSON.parse(localStorage.getItem("key")); 就是讀取瀏覽器中參數名為 key 的參數值。

比如靜態保存某個設置參數，可以將其寫入數組中，然後通過 localStorage 存儲，原本刷新就會顯示默認設置，現在可以在每次刷新的適合讀取存入的參數。

在一些場景下非常好用，比如開發一個油猴腳本等等。

清除 localStorage，分為清除所以的存儲值和清除某個特定的 key。

// 清除本地存儲中的所有值
localStorage.clear(); 

// 本地存儲中刪除特定項
localStorage.removeItem(key);