Web前端存儲之sessionStorage和localStorage

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

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

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

3. localStorage和sessionStorage的存儲數據大小通常都是：5MB

 

用法說明：sessionStorage 和 localStorage 的用法基本一致，引用類型的值須要轉換成 JSON 進行存儲

 

1. 保存數據到本地

　　

    let obj = {
        name: 'xiaoming',
        age: 18,
        birthday: '2000-01-01',
    }

    sessionStorage.setItem('userInfo', JSON.stringify(obj))

    localStorage.setItem('userInfo', JSON.stringify(obj))

注：若第二次存儲的key值與第一次存儲的key值相同，則會覆蓋第一次的值。

 

2. 從本地讀取數據

 

let obj1 = JSON.parse(sessionStorage.getItem('userInfo'))

let obj2 = JSON.parse(localStorage.getItem('userInfo'))

 

3. 從本地刪除指定 key 值

 

sessionStorage.removeItem('userInfo')

localStorage.removeItem('userInfo')

 

4. 清空存儲的全部值

 

sessionStorage.clear()

localStorage.clear()