web 本地存儲 （localStorage、sessionStorage）

說明

對瀏覽器來說，使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorage

1. sessionStorage（臨時存儲） ：為每一個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面重新加載

2. localStorage（長期存儲） ：與 sessionStorage 一樣，但是瀏覽器關閉后，數據依然會一直存在

API

sessionStorage 和 localStorage 的用法基本一致，引用類型的值要轉換成JSON

1. 保存數據到本地

    const info = { name: 'Lee', age: 20, id: '001' }; sessionStorage.setItem('key', JSON.stringify(info)); localStorage.setItem('key', JSON.stringify(info));

2. 從本地存儲獲取數據

    var data1 = JSON.parse(sessionStorage.getItem('key')); var data2 = JSON.parse(localStorage.getItem('key'));

3. 本地存儲中刪除某個保存的數據

    sessionStorage.removeItem('key'); localStorage.removeItem('key');

4. 刪除所有保存的數據

    sessionStorage.clear();
    localStorage.clear();

5. 監聽本地存儲的變化

Storage 發生變化（增加、更新、刪除）時的 觸發，同一個頁面發生的改變不會觸發，只會監聽同一域名下其他頁面改變 Storage

    window.addEventListener('storage', function (e) { console.log('key', e.key); console.log('oldValue', e.oldValue); console.log('newValue', e.newValue); console.log('url', e.url); })