寫在前面

瀏覽器本地存儲包括兩個對象：sessionStorage 和 localStorage，它們都是 Storage 的實例對象。

window.localStorage instanceof Storage; // true

Web Storage 的基本使用

查-訪問數據：getItem() 方法。

增改-添加、修改數據：setItem() 方法。

刪-刪除數據：removeItem() 方法。

清空數據：clear() 方法。

獲取給定索引位置對應的鍵名：key() 方法。

// 以 localStorage 為例，sessionStorage 是異曲同工之妙
// 添加數據
localStorage.setItem('name', 'bruce')
localStorage.setItem('age', 2333)

// 修改數據
localStorage.setItem('age', 520); // { name: 'bruce', age: 520 }

// 讀取數據
localStorage.getItem('age'); // 520

// 刪除數據
localStorage.removeItem('name'); // { age: 520 }

// 清空數據
localStorage.clear(); 

// 遍歷 localStorage 的所有值
// 根據索引位置，利用 key() 方法獲取到鍵名，進而使用 getItem() 方法取到對應的值
for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
  console.log(`key: ${key}, value: ${value}`);
}

注意事項

localStorage 和 sessionStorage 都只能夠存儲字符串，如果不是字符串的值，會隱式調用 toString() 方法將其轉換成字符串。

如果想要存儲對象，需要使用 JSON.stringify() 將對象轉換為 JSON 字符串再存儲，使用 JSON.parse() 方法還原成對象。

如果無法轉成字符串，則會報錯。比如 Symbol 類型的變量無法轉成字符串，因此瀏覽器存儲對象無法儲存 Symbol 類型變量。

let obj = { book: 'HTTP', price: 46 };
let obj2 = {};
function fn() {};

localStorage.setItem(obj, 'object'); // '[object Object]': 'object'
localStorage.setItem('func', fn); // 'func': 'function fn() {}'

localStorage.setItem('info', JSON.stringify(obj)); // 'info': '{\"book\":\"HTTP\",\"price\":46}'

localStorage.getItem(obj2); // 'object'，obj2 會被轉成 '[object Object]'，和 obj 的鍵名相同，因此取到的值也相同


localStorage.setItem('symbol', Symbol(666)); // Uncaught TypeError: Cannot convert a Symbol value to a string

sessionStorage 與 localStorage 對比

sessionStorage 是跨會話存儲機制，localStorage 是永久存儲機制。

作用時間：sessionStorage 在窗口關閉後就會失效，localStorage 是永久存儲，除非手動通過 JS 刪除或清除瀏覽器緩存。

作用範圍：sessionStorage 的數據只能在同源（協議域名端口號相同）、同一個窗口共享，localStorage 的數據在同源、不同窗口共享（同一個瀏覽器）。