localStorage的存儲(chǔ),讀取,刪除

localStorage存儲(chǔ)

我們通過(guò)以下方式將數(shù)據(jù)儲(chǔ)存到localStorage中

window.localStorage.setItem('key',value)

但有時(shí)value為一個(gè)對(duì)象Object，以上面的方式寫(xiě)入，會(huì)出現(xiàn)讀取的返回值為{object Object}的情況，但這并不是我們想要的，此時(shí)我們需要使用新的方式

傳入Object

window.localStorage.setItem('param',JSON.stringify(Object))

通過(guò)JSON.stringify(Object)方法將對(duì)象轉(zhuǎn)化為一個(gè)json格式的字符串進(jìn)行存儲(chǔ)

localStorage讀取

我們通過(guò)以下方式來(lái)讀取localStorage中的值

window.localStorage.getItem('key')

相對(duì)的在讀取json格式字符串只有我們也無(wú)法直接使用，需要將它轉(zhuǎn)換為josn對(duì)象之后才是我們想要的結(jié)果，所以我們需要調(diào)用 JSON.parse()方法來(lái)進(jìn)行轉(zhuǎn)化，之后在繼續(xù)使用

JSON.parse(window.localStorage.getItem('key'))

localStorage刪除

我們通過(guò)以下方法來(lái)刪除對(duì)應(yīng)key以及key中的內(nèi)容

window.localStorage.removeItem('key')

localStorage清空所有的key

清空l(shuí)ocalStorage中所有的key;

注意：請(qǐng)謹(jǐn)慎使用,它會(huì)清空所有的本地存儲(chǔ)數(shù)據(jù)

window.localStorage.clear()

localStorage使用詳解

localStorage簡(jiǎn)介

localStorage 和 sessionStorage 一樣，都是 HTML5 中最新引入的 Web 存儲(chǔ) API。

Web 存儲(chǔ) API，英文為 Web Storage API，通過(guò)它可以方便地在用戶瀏覽器中存儲(chǔ)鍵值對(duì)。

Web 存儲(chǔ) API 包括兩個(gè)對(duì)象：

• localStorage
• sessionStorage

在 HTML5 之前，應(yīng)用數(shù)據(jù)需要存放在 Cookie 中，每次請(qǐng)求時(shí)都需要攜帶它。相較而言，Web 存儲(chǔ) API 擁有以下優(yōu)點(diǎn)：

• 不向服務(wù)器傳輸信息，更加安全。
• 比起 [[202009011658 Cookie 數(shù)量和大小的限制|Cookie 4kb 的容量限制]]，可以在本地存儲(chǔ)大量數(shù)據(jù)，通常為 5mb。

除此之外，localStorage 還有以下特點(diǎn)：

• 永久存儲(chǔ)數(shù)據(jù)，沒(méi)有過(guò)期時(shí)間，除非使用 JavaScript、清除瀏覽器緩存或者本地?cái)?shù)據(jù)才能夠刪除。
• 存儲(chǔ)容量上限比 Cookie 和 SessionStorage 都要大。
• 遵循同源策略，來(lái)自同一個(gè)源的所有頁(yè)面共享同樣的數(shù)據(jù)。同源指的是域名和協(xié)議相同。
• 其中存儲(chǔ)的鍵值對(duì)都是字符串，如果不是字符串將自動(dòng)轉(zhuǎn)換為字符串。

調(diào)試localStorage

• Ctrl - Shift - I 或者 F12
• 點(diǎn)擊 Application
• 左側(cè)點(diǎn)擊 Storage 下面的 LocalStorage

localStorage的CRUD

為 localStorage 添加或修改數(shù)據(jù)有三種方式：

localStorage.age = 100
localStorage['age'] = 100
localStorage.setItem('age', 100) ?// 推薦使用

在 localStorage 中查看數(shù)據(jù)也有三種方式：

localStorage.age
localStorage['age']
localStorage.getItem('age') ?// 推薦使用

在 localStorage 中刪除數(shù)據(jù)有三種方式：

delete localStorage.age
delete localStorage['age']
localStorage.removeItem('age') ?// 推薦使用

清空整個(gè) localStorage：

// 清空整個(gè) localStorage
localStorage.clear()

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。