瀏覽器本地存儲，大小為5MB左右(會因瀏覽器的不同而有所差別)，通過其自身提供的API window.localStorage和window.sessionStorage實現。

localStorage與sessionStorage的區別

• localStorage 瀏覽器關閉也不會消失，必須手動清除（js清除事件，用戶清除緩存等）
• sessionStorage瀏覽器關閉就會消失

兩者的api相同(以下以locaStorage做示例)

存儲數據setItem()

有兩個參數，分別對應key-value，且類型都為字符串，如果不是字符串，此方法會自動調用toString()轉換成字符串。所以要存入非字符串類型的值時要先將其序列化（JSON.stringify）。如果是相同的數據，不會再次存入。

 let dog={
    name:'fachai',
    age:2
}
function setData(){
    localStorage.setItem('apple','$45')
    localStorage.setItem('dog1',dog)
    localStorage.setItem('dog2',JSON.stringify(dog))
}

image

讀取數據getItem()

一個參數，為字符串類型，key-value中的key

讀取后返回的數據是經過序列化的值的時候，要用JSON.parse()解析。讀取不存在數據，返回null，JSON.parse(null)結果也為null，不會出現報錯。

 let apple=localStorage.getItem('apple')
 let dog2= JSON.parse(localStorage.getItem('dog2')) 
  console.log(apple)
  console.log(dog2)

刪除數據

removeItem()

一個參數，為字符串類型，key-value中的key
localStorage.removeItem('apple')

clear()

沒有參數，直接將數據全部清空
localStorage.clear()