說明

HTML5為我們提供了新的用于存儲(chǔ)本地?cái)?shù)據(jù)的javascript API，可以在瀏覽器中存儲(chǔ)我們想要存儲(chǔ)的數(shù)據(jù)。分為持久化存儲(chǔ)(localStorage)和會(huì)話存儲(chǔ)(sessionStorage)，根據(jù)瀏覽器廠商的不同，每個(gè)域分配的空間也不同，大約為5M到10M的存儲(chǔ)空間。

API

localStorage和sessionStorage的用法基本一致，引用類型的值要轉(zhuǎn)換成JSON

• 字符串轉(zhuǎn)化為整數(shù)使用parseInt
• 字符串轉(zhuǎn)化為float類型parseFloat
• 數(shù)組轉(zhuǎn)化為json字符串JSON.stringify(arr)
• json字符串轉(zhuǎn)化為數(shù)組JSON.parse(json)

存儲(chǔ)數(shù)據(jù)到本地

// 使用setItem方法存儲(chǔ)數(shù)據(jù)
localStorage.setItem('name', 'ding')
sessionStorage.setItem('name', 'ding')
// 采用直接賦值的方式存儲(chǔ)數(shù)據(jù)
localStorage.age = 22
sessionStorage.age = 22

獲取本地存儲(chǔ)中的數(shù)據(jù)

// 通過getItem()方法根據(jù)鍵獲取值
console.log(localStorage.getItem('name')) // ding
console.log(sessionStorage.getItem('name')) // ding
// 直接獲取存儲(chǔ)對象下面的屬性
console.log(sessionStorage.name)  // ding
console.log(localStorage.name)  // ding

通過屬性length和key屬性操作storage

for(var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i)
    var value = localStorage[key]
    console.log(key, value) // age 22 & name ding
}
for(var i = 0; i < sessionStorage.length; i++) {
    var key = sessionStorage.key(i)
    var value = sessionStorage[key]
    console.log(key, value) // age 22 & name ding
}

刪除本地存儲(chǔ)中指定數(shù)據(jù)

localStorage.removeItem('name')
sessionStorage.removeItem('name')

刪除本地存儲(chǔ)中所有數(shù)據(jù)

localStorage.clear()
sessionStorage.clear()

localStorage和sessionStorage的區(qū)別

sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問并且當(dāng)會(huì)話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級別的存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)立馬會(huì)被刪除。（特別提示：新建一個(gè)標(biāo)簽頁面以后，即使跟前一個(gè)頁面的地址相同，新建標(biāo)簽頁面也獲取不到前一個(gè)頁面中獲取或者設(shè)置的sessionStorage）
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。localStorage所有頁面都可以獲取；