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

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

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

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

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

typeof(Storage)

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

本文探討了以下問題:

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

localStorage是什么?

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

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

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

• 離線存儲網(wǎng)站的用戶設(shè)置
• 保留用戶搜索歷史
• 保留購物車?yán)锏奈锲?/li>

接下來，讓我們比較localStorage和sessionStorage。

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

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

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

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

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

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

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

首先，讓我們在localStorage對象中創(chuàng)建一個新的鍵值對。setItem函數(shù)接受一個鍵及其值。為密鑰選擇一個合適的名稱，你可能將使用該密鑰名稱再次進(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')

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

localStorage.removeItem(‘my-key')

為了確保我們已經(jīng)刪除了所有鍵，讓我們使用clear函數(shù)來清除存儲在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時要避免的坑。

localStorage常見的坑

讓我們看一下與localStorage API交互時最常見的兩個坑。

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

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

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

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

其次，嘗試存儲一個布爾值。同樣，localStorage API只支持字符串。存儲布爾值時要小心。

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

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

localStorage的限制

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

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

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

最新評論