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

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

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

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

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

typeof(Storage)

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

本文探討了以下問題:

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

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

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

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

離線存儲(chǔ)網(wǎng)站的用戶設(shè)置 保留用戶搜索歷史 保留購物車?yán)锏奈锲?p>接下來，讓我們比較localStorage和sessionStorage。

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

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

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

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

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

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

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

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

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

現(xiàn)在讓我們再次檢索新創(chuàng)建的對象。

let item = localStorage.getItem(‘my-key’)console.log(item) // Output: “some-value”

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

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

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

localStorage.removeItem(‘my-key’)

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

localStorage.clear()

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

高級localStorage操作:遍歷

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

第一種方法使用了最直接的for循環(huán)。注意，我們可以直接在localStorage對象上使用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)}

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

localStorage常見的坑

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

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

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

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

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

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

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

let myBool = JSON.parse(localStorage.getItem(‘my-bool’))localStorage的限制

這里是對localStorage限制的快速回顧。

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

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