定義
只讀的 localStorage 允許你訪問一個 Document 的遠端（origin）對象 Storage；數據存儲為跨瀏覽器會話。localStorage 類似于 sessionStorage，區別在于，數據存儲在 localStorage 是無期限的，而數據存儲在 sessionStorage 會被清除，當頁面會話結束時——也就是說當頁面被關閉。
屬性
length
localStorage 內鍵值對的數量。
localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1方法
1.setItem(key, value)
新增/更新 localStorage 的鍵值對。
localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: "23", name: "mazey", length: 2}等同于：
localStorage.name = 'mazey'localStorage.age = '23'localStorage // Storage {age: "23", name: "mazey", length: 2}2.getItem(key)
獲取 localStorage 中指定鍵的值。
localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex') // null等同于：
localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // undefined3.removeItem(key)
移除 localStorage 中指定鍵的鍵值對。
localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: "23", name: "mazey", length: 2}localStorage.removeItem('age') // undefinedlocalStorage // {name: "mazey", length: 1}localStorage.removeItem('age') // undefined4.clear()
清空 localStorage 中所有鍵值對。
localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Storage {age: "23", name: "mazey", length: 2}localStorage.clear()localStorage // Storage {length: 0}存取對象（復雜值）
localStorage 只能存字符串，所以數組/對象等復雜值要先用 JSON.stringify() 轉換成字符串，取出來時再用 JSON.parse() 轉換成復雜值再使用。
let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // "1,2,3"// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // "[1,2,3]"JSON.parse(localStorage.getItem('arr')) // [1, 2, 3]瀏覽器標簽之前通信
讓 window 監聽 localStorage 的 storage，一個標簽的 localStorage 發生改變時，其它標簽做出相應的響應。
test0.html - 改變 localStorage。
<input type="text" id="input" /><button onclick="setNameForStorage()">Set</button><script type="text/javascript"> function setNameForStorage () { localStorage.name = document.querySelector('#input').value }</script>test1.html - 響應 localStorage 的改變。
<script type="text/javascript"> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // name 123 })</script>注意
其它
Please Stop Using Local Storage
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
