web 本地存儲 （localStorage、sessionStorage）

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); })
sessionStorage沒法監聽變動（chrome瀏覽器測試）
chrome瀏覽器

瀏覽器查看方法

進入開發者工具

選擇 Application

在左側 Storage 下 查看 Local Storage 和 Session Storage

 

注意Local Storage 和 Session Storage只能存儲字符串，好比存儲了一個boolean型，值爲true，取出來會是字符串"true"