這篇文章將為大家詳細講解有關(guān)Html5中l(wèi)ocalStorage的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)從2013年成立，先為茶陵等服務(wù)建站，茶陵等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為茶陵企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

定義

只讀的 localStorage 允許你訪問一個 Document 的遠端（origin）對象 Storage；數(shù)據(jù)存儲為跨瀏覽器會話。localStorage 類似于 sessionStorage，區(qū)別在于，數(shù)據(jù)存儲在 localStorage 是無期限的，而數(shù)據(jù)存儲在 sessionStorage 會被清除，當(dāng)頁面會話結(jié)束時——也就是說當(dāng)頁面被關(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}

存取對象（復(fù)雜值）

localStorage 只能存字符串，所以數(shù)組/對象等復(fù)雜值要先用 JSON.stringify() 轉(zhuǎn)換成字符串，取出來時再用 JSON.parse() 轉(zhuǎn)換成復(fù)雜值再使用。

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ā)生改變時，其它標簽做出相應(yīng)的響應(yīng)。

test0.html - 改變 localStorage。

Set

    function setNameForStorage () {
        localStorage.name = document.querySelector('#input').value
    }

test1.html - 響應(yīng) localStorage 的改變。

    window.addEventListener('storage', e => {
        console.log(e.key, e.newValue) // name 123
    })

注意

1. localStorage 只能同域名下使用，可以搭配 postMessage 和 iframe 實現(xiàn)跨域通信。

2. 低版本IE不支持 localStorage。

3. 需在服務(wù)器環(huán)境下使用，即不能在 file:// 等非正常環(huán)境下使用。

4. 在移動端 localStorage（H5, IOS, Android）會發(fā)生不可預(yù)知的問題。

其它

Please Stop Using Local Storage

關(guān)于“Html5中l(wèi)ocalStorage的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前題目：Html5中l(wèi)ocalStorage的示例分析-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/hihsi.html