如果你是一名開發人員，想要進入到.NET的世界，你需要知道都有哪些可能。由于.NET Framework是.NET生態系統中最流行的技術，你可以用它來構建各種各樣的應用程序，但是最近，出現了一些新的東西，比如 .NET Core 和.NET Standard library。我們可以在項目或構建中使用它嗎?

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

大多數web開發人員都喜歡localStorage API，因為它具有簡單的語法并且可以存儲高達5MB的數據。

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

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

typeof(Storage)

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

本文探討了以下問題:

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

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

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

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

離線存儲網站的用戶設置 保留用戶搜索歷史 保留購物車里的物品

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

localStorage和sessionStorage之間有什么區別?

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

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

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

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

如何使用localStorage API執行CRUD操作

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

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

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

現在讓我們再次檢索新創建的對象。

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

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

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

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

localStorage.removeItem(‘my-key’)

為了確保我們已經刪除了所有鍵，讓我們使用clear函數來清除存儲在localStorage中應用程序的所有內容。

localStorage.clear()

現在，我們已經為更高級的localStorage操作做好了準備。

高級localStorage操作:遍歷

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

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

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

我們也可以直接使用key方法檢索相應的鍵。

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

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

localStorage常見的坑

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

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

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

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

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

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

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

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

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

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

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