如果你是一名開(kāi)發(fā)人員，想要進(jìn)入到.NET的世界，你需要知道都有哪些可能。由于.NET Framework是.NET生態(tài)系統(tǒng)中最流行的技術(shù)，你可以用它來(lái)構(gòu)建各種各樣的應(yīng)用程序，但是最近，出現(xiàn)了一些新的東西，比如 .NET Core 和.NET Standard library。我們可以在項(xiàng)目或構(gòu)建中使用它嗎?

localStorage對(duì)象是web編程中應(yīng)用最廣泛的對(duì)象之一。它提供了在用戶(hù)計(jì)算機(jī)上本地存儲(chǔ)鍵值對(duì)的簡(jiǎn)單解決方案。

大多數(shù)web開(kāi)發(fā)人員都喜歡localStorage API，因?yàn)樗哂泻?jiǎn)單的語(yǔ)法并且可以存儲(chǔ)高達(dá)5MB的數(shù)據(jù)。

除此之外，所有主流瀏覽器的最新版本都支持Web Storage API，其中包括localStorage和sessionStorage。只有Opera Mini不支持webstorage API。

你可以通過(guò)打開(kāi)Chrome DevTools快速驗(yàn)證你的瀏覽器是否支持webstorage API。導(dǎo)航到“控制臺(tái)”，鍵入下面的代碼片段，并按enter鍵。

typeof(Storage)

如果你收到一個(gè)undefined ，那么你的瀏覽器不支持webstorage API。如果你的瀏覽器支持它，那么你應(yīng)該看到“function”。

本文探討了以下問(wèn)題:

• localStorage是什么?
• localStorage和sessionStorage之間有什么區(qū)別?
• 如何使用localStorage API執(zhí)行CRUD操作
• 常見(jiàn)的本地存儲(chǔ)有什么坑?
• localStorage的有什么限制?

localStorage是什么?

正如之前提到的，localStorage對(duì)象是瀏覽器本地支持的webstorage API的一部分。這是一個(gè)簡(jiǎn)單而有效的鍵/值存儲(chǔ)解決方案。

對(duì)于web開(kāi)發(fā)人員來(lái)說(shuō)，使用localStorage對(duì)象的最大好處是可以脫機(jī)存儲(chǔ)。最重要的是，當(dāng)用戶(hù)關(guān)閉瀏覽器或重啟電腦時(shí)，我們不會(huì)丟失數(shù)據(jù)。即使在計(jì)算機(jī)重新啟動(dòng)后，網(wǎng)站仍然可以使用localStorage API讀取本地存儲(chǔ)在用戶(hù)計(jì)算機(jī)上的數(shù)據(jù)。

這個(gè)解決方案為web開(kāi)發(fā)人員提供了幾個(gè)有趣的用例。

• 離線(xiàn)存儲(chǔ)網(wǎng)站的用戶(hù)設(shè)置
• 保留用戶(hù)搜索歷史
• 保留購(gòu)物車(chē)?yán)锏奈锲?/li>

接下來(lái)，讓我們比較localStorage和sessionStorage。

localStorage和sessionStorage之間有什么區(qū)別?

雖然這兩個(gè)api看起來(lái)是相同的，但它們的執(zhí)行方式有細(xì)微的差異。

localStorage API用于本地存儲(chǔ)數(shù)據(jù)。因此，當(dāng)用戶(hù)刷新選項(xiàng)卡、關(guān)閉瀏覽器或重啟計(jì)算機(jī)時(shí)，本地保存的數(shù)據(jù)不會(huì)丟失。它是長(zhǎng)期存儲(chǔ)基本數(shù)據(jù)的理想解決方案。

sessionStorage API在頁(yè)面刷新后仍然有效，但只能在相同的選項(xiàng)卡中工作。

簡(jiǎn)而言之，在為應(yīng)用程序選擇存儲(chǔ)解決方案時(shí)要注意。例如，最好的做法是將用戶(hù)設(shè)置信息存儲(chǔ)在localStorage中。相反，sessionStorage最適合為特定會(huì)話(huà)存儲(chǔ)數(shù)據(jù)。

如何使用localStorage API執(zhí)行CRUD操作

本節(jié)向你展示如何使用localStorage API進(jìn)行添加、讀取、更新或刪除操作。在此基礎(chǔ)上，我將向你展示一個(gè)清除特定頁(yè)面localStorage的技巧。

首先，讓我們?cè)趌ocalStorage對(duì)象中創(chuàng)建一個(gè)新的鍵值對(duì)。setItem函數(shù)接受一個(gè)鍵及其值。為密鑰選擇一個(gè)合適的名稱(chēng)，你可能將使用該密鑰名稱(chēng)再次進(jìn)行檢索。

localStorage.setItem(‘my-key', ‘some-value')

現(xiàn)在讓我們?cè)俅螜z索新創(chuàng)建的對(duì)象。

let item = localStorage.getItem(‘my-key')

console.log(item) // Output: “some-value”

這很簡(jiǎn)單。讓我們繼續(xù)更新my-key的值。注意，我們使用相同的setItem函數(shù)來(lái)覆蓋它的值。

localStorage.setItem(‘my-key', ‘new-value')

最后，讓我們刪除這個(gè)鍵。removeItem函數(shù)接受一個(gè)參數(shù)，它就是想要?jiǎng)h除的鍵。

localStorage.removeItem(‘my-key')

為了確保我們已經(jīng)刪除了所有鍵，讓我們使用clear函數(shù)來(lái)清除存儲(chǔ)在localStorage中應(yīng)用程序的所有內(nèi)容。

localStorage.clear()

現(xiàn)在，我們已經(jīng)為更高級(jí)的localStorage操作做好了準(zhǔn)備。

高級(jí)localStorage操作:遍歷

讓我們看看用于遍歷localStorage對(duì)象和查找鍵的方法。

第一種方法使用了最直接的for循環(huán)。注意，我們可以直接在localStorage對(duì)象上使用length屬性。

for(let i=0; i<localStorage.length; i++) {
 let key = localStorage.key(i)
 console.log(`${key} with value ${localStorage.getItem(key)}`)
}

我們也可以直接使用key方法檢索相應(yīng)的鍵。

for (let i = 0; i < localStorage.length; i++){
 let key = localStorage.key(i)
 console.log(key)
}

接下來(lái)，讓我們看看在使用localStorage API時(shí)要避免的坑。

localStorage常見(jiàn)的坑

讓我們看一下與localStorage API交互時(shí)最常見(jiàn)的兩個(gè)坑。

首先，嘗試存儲(chǔ)一個(gè)JSON對(duì)象。localStorage API被設(shè)計(jì)為鍵-值對(duì)存儲(chǔ)。因此，該值只接受字符串，不接受對(duì)象。然而，這并不意味著我們不能存儲(chǔ)對(duì)象。我們需要將它序列化為一個(gè)字符串。

const dinner = { apples: 5, oranges: 1 }
localStorage.setItem(‘my-dinner', JSON.stringify(dinner))

當(dāng)讀取序列化的對(duì)象時(shí)，我們需要再次將其解析為JSON。

let dinner = JSON.parse(localStorage.getItem(‘my-dinner'))

其次，嘗試存儲(chǔ)一個(gè)布爾值。同樣，localStorage API只支持字符串。存儲(chǔ)布爾值時(shí)要小心。

幸運(yùn)的是，該解決方案類(lèi)似于存儲(chǔ)一個(gè)JSON對(duì)象。當(dāng)存儲(chǔ)一個(gè)布爾值時(shí)，setItem函數(shù)將把它轉(zhuǎn)換為像這樣的字符串- " true "。要讀取帶有字符串的布爾值，我們可以使用JSON.parse方法將其轉(zhuǎn)換回布爾值。

let myBool = JSON.parse(localStorage.getItem(‘my-bool'))

localStorage的限制

這里是對(duì)localStorage限制的快速回顧。

• 基于字符串的存儲(chǔ)
• 大多數(shù)瀏覽器的存儲(chǔ)空間有限，最多可達(dá)5 MB
• 嘗試存儲(chǔ)巨大字符串時(shí)會(huì)阻塞主線(xiàn)程。確保不要同時(shí)更新相同的鍵，因?yàn)檫@將導(dǎo)致問(wèn)題。在這種情況下，最好尋找替代存儲(chǔ)解決方案，因?yàn)閘ocalStorage API不是為這個(gè)目的而設(shè)計(jì)的。
• Web worker或web service無(wú)法訪問(wèn)localStorage
• 沒(méi)有內(nèi)置的安全機(jī)制。因此，我們不建議存儲(chǔ)密碼或與身份驗(yàn)證相關(guān)的數(shù)據(jù)。任何可以訪問(wèn)用戶(hù)瀏覽器的人都可以打開(kāi)一個(gè)頁(yè)面并讀取存儲(chǔ)在localStorage中的信息，就像圖書(shū)館中公共可用的計(jì)算機(jī)一樣。
  

到此這篇關(guān)于如何在JavaScript中使用localStorage的文章就介紹到這了,更多相關(guān)如何在JavaScript中使用localStorage內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論