定義
只讀的 localStorage 允許你訪問一個 Document 的遠端（origin）對象 Storage；數(shù)據(jù)存儲為跨瀏覽器會話。localStorage 類似于 sessionStorage，區(qū)別在于，數(shù)據(jù)存儲在 localStorage 是無期限的，而數(shù)據(jù)存儲在 sessionStorage 會被清除，當頁面會話結(jié)束時——也就是說當頁面被關(guān)閉。
屬性
length
localStorage 內(nèi)鍵值對的數(shù)量。
localStorage.length // 0
localStorage.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') // mazey
localStorage.getItem('age') // 23
localStorage.getItem('sex') // null
等同于：
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage.name // mazey
localStorage['age'] // 23
localStorage.sex // undefined
3.removeItem(key)
移除 localStorage 中指定鍵的鍵值對。
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
localStorage // Storage {age: "23", name: "mazey", length: 2}
localStorage.removeItem('age') // undefined
localStorage // {name: "mazey", length: 1}
localStorage.removeItem('age') // undefined
4.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 只能存字符串，所以數(shù)組/對象等復雜值要先用 JSON.stringify() 轉(zhuǎn)換成字符串，取出來時再用 JSON.parse() 轉(zhuǎn)換成復雜值再使用。
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 監(jiān)聽 localStorage 的 storage，一個標簽的 localStorage 發(fā)生改變時，其它標簽做出相應的響應。
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
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
標簽：文山 紅河 萍鄉(xiāng) 咸陽 蘇州 甘南 營口 惠州
巨人網(wǎng)絡通訊聲明：本文標題《Html5 localStorage入門教程》，本文關(guān)鍵詞 Html5,localStorage,入門教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權(quán)與本站無關(guān)。
