什么是網(wǎng)絡(luò)存儲(chǔ) API？

Web Storage API 提供了瀏覽器可以存儲(chǔ)鍵/值對(duì)數(shù)據(jù)（如對(duì)象）的方法。

存儲(chǔ)在網(wǎng)絡(luò)存儲(chǔ) API 中的鍵/值對(duì)總是以字符串的形式存在。（整數(shù)鍵自動(dòng)轉(zhuǎn)換為字符串）

Web Storage API 提供了一組方法，您可以使用它們來訪問、刪除修改鍵/值對(duì)

Web Storage API 中有兩種類型的存儲(chǔ)可用

• sessionStorage
• localStorage

什么是本地存儲(chǔ)？

LocalStrorage是網(wǎng)絡(luò)存儲(chǔ) API 的一部分。它允許您將持久數(shù)據(jù)（數(shù)據(jù)保留在瀏覽器重新加載以及瀏覽器關(guān)閉和重新打開時(shí)）Window作為鍵/值對(duì)字符串存儲(chǔ)在瀏覽器對(duì)象中。

localStorage 有五種方法，它們是：

• setItem
• getItem
• removeItem
• clear
• key

sessionStorage 和 localStorage 的區(qū)別

和sessionStorage都是localStorageWeb 存儲(chǔ) API 的一部分。

• 僅在瀏覽器打開之前可用sessionStorage，當(dāng)瀏覽器關(guān)閉時(shí)，將sessionStorage被刪除。（sessionStorage在瀏覽器重新加載時(shí)可用，但在瀏覽器關(guān)閉時(shí) sessionStorage 被刪除）
• 這localStorage是持久數(shù)據(jù)，即使瀏覽器關(guān)閉，localStorage數(shù)據(jù)仍保留在瀏覽器中
• localStorage可由用戶手動(dòng)刪除，當(dāng)用戶處于隱身窗口或隱私窗口且用戶關(guān)閉瀏覽器時(shí)自動(dòng)刪除

和sessionStorage都localStorage提供了類似的方法來訪問和存儲(chǔ)瀏覽器中的數(shù)據(jù)

我們將更多地了解LocalStorage以下方法

本地存儲(chǔ)方法

中有五個(gè)方法localStorage。這些方法可讓您存儲(chǔ)項(xiàng)目、獲取項(xiàng)目、刪除項(xiàng)目和清除localStorage.

1. setItem()：將數(shù)據(jù)存儲(chǔ)到localStorage

使用 localStorage.setItem API，您可以將鍵/值對(duì)存儲(chǔ)在本地存儲(chǔ)中。這是一個(gè)關(guān)于如何存儲(chǔ)數(shù)據(jù)的例子。

window.localStorage.setItem('candy name', 'Mars Bar');

thecandy name是鍵，theMars Bar是值。正如我們提到的，localStorage 只存儲(chǔ)字符串。

您可以在瀏覽器本身中嘗試此操作。這是在 chrome 瀏覽器中存儲(chǔ)數(shù)據(jù)的示例

localStorage在using中有多種存儲(chǔ)數(shù)據(jù)的方法setItem。您可以通過以下方式訪問對(duì)象中的數(shù)據(jù)：

window.localStorage.candyName = 'Mars';
window.localStorage['candyName'] = 'Mars';
window.localStorage.setItem('candyName','mars');

允許但不建議以類似對(duì)象的方式存儲(chǔ)或訪問數(shù)據(jù)，因?yàn)橛脩羯傻拿荑€可以通過任何類似toString或length或 localStorage 的任何其他內(nèi)置方法名稱

在這種情況下，getItemandsetItem可以正常工作，但 Object like 方法將失敗

使用類似對(duì)象的符號(hào)

2. getItem()：從localStorage中獲取數(shù)據(jù)

使用 getItem API，我們可以檢索存儲(chǔ)在 localStorage 中的鍵/值對(duì)

getItem() 接受一個(gè)鍵并將值作為字符串返回

這將返回值作為Mars Bar

使用對(duì)象表示法

使用對(duì)象表示法，您還可以訪問數(shù)據(jù)（盡管不推薦這樣做）

window.localStorage.candyName
returns 'Mars'
window.localStorage['candy2']
returns 'turtles'

3. removeItem() 從本地存儲(chǔ)中刪除一個(gè)項(xiàng)目

localStorage您可以使用該removeItem方法刪除任何項(xiàng)目

將您需要?jiǎng)h除的項(xiàng)目的鍵傳遞給該removeItem方法，并將其從localStorage

window.localStorage.removeItem('candies');

讓我們使用控制臺(tái)看看 removeItem 是如何工作的。首先，我們將使用 length 屬性來檢查本地存儲(chǔ)中有多少項(xiàng)

如您所見，當(dāng)我們使用 length 屬性時(shí)，它顯示localStorage. 在我們刪除一個(gè)項(xiàng)目后，現(xiàn)在本地存儲(chǔ)中只剩下一個(gè)項(xiàng)目

4. clear() 清除localStorage

使用Clear()localStorage API 的方法，您可以清除整個(gè) localStorage 并刪除 localStorage 中的所有數(shù)據(jù)

window.localStorage.clear();

讓我們使用控制臺(tái)看看 clear 方法是如何工作localStorage的

我們將使用長(zhǎng)度來檢查項(xiàng)目的數(shù)量localStorage

5. key() 返回存儲(chǔ)中的第n個(gè)鍵

key 方法可以傳遞任何整數(shù)，它將返回存儲(chǔ)在存儲(chǔ)對(duì)象中第 n 個(gè)鍵的鍵

window.localstorage.key(index)

讓我們使用控制臺(tái)看看密鑰是如何工作的

我們已經(jīng)將鍵/值對(duì)放在 localStorage 中，例如

window.localStorage.candyName = 'Mars'
window.localStorage['candy2'] = 'turtles'

讓我們使用length檢查 localStorage 的內(nèi)容

window.localStorage.length

如您所知，索引從 0 開始。讓我們看看索引 0 處有什么

讓我們看看索引 1 是什么

存儲(chǔ)屬性

length : 存儲(chǔ)在本地的鍵/值對(duì)的數(shù)量

長(zhǎng)度是接口的只讀屬性localStorage。它返回存儲(chǔ)在中的鍵/值對(duì)的數(shù)量localStorage

window.localStorage.length

我們可以使用 length 屬性來測(cè)試是否localStorage填充了。

到目前為止，我們已經(jīng)多次使用了 length 屬性，您可能已經(jīng)熟悉了。

讓我們?cè)诓煌挠美惺褂瞄L(zhǎng)度屬性來進(jìn)一步探索它的用途。讓我們打開控制臺(tái)，看看如何使用 length 屬性

window.localStorage.length
2

現(xiàn)在 length 屬性也可以用來檢查 localStorage 是否為空。讓我們清除 localStorage，看看如果我們使用 length 屬性會(huì)發(fā)生什么

它返回 0。因此我們知道如果 length 屬性返回 0，則 localStorage 為空

存儲(chǔ)事件

每當(dāng)對(duì)存儲(chǔ)對(duì)象進(jìn)行更改時(shí)都會(huì)觸發(fā)存儲(chǔ)事件

當(dāng)窗口有權(quán)訪問的存儲(chǔ)區(qū)域在另一個(gè)文檔的上下文中發(fā)生更改時(shí)，將 StorageEvent 發(fā)送到窗口

存儲(chǔ)事件是每當(dāng)發(fā)生更改時(shí)都會(huì)觸發(fā)的事件，您可以收聽存儲(chǔ)事件并在您的網(wǎng)站或應(yīng)用程序中做出適當(dāng)?shù)臎Q定。

構(gòu)造器

StorageEvent()

返回一個(gè)新StorageEvent對(duì)象

讓我們使用控制臺(tái)創(chuàng)建一個(gè)新的 storageEvent() 實(shí)例

創(chuàng)建 StorageEvent 的新實(shí)例

new window.StorageEvent(keys)

回報(bào)

實(shí)例屬性

Keys (read only)

返回表示已更改的鍵的字符串。當(dāng)由 clear() 方法引起變化時(shí)，key 屬性為 null

newValue(read only)

返回一個(gè)字符串，其中包含已更改的鍵的新值。當(dāng)使用 clear() 方法或密鑰已被刪除時(shí)為 null

oldValue(read only)

返回具有鍵的原始值的字符串。如果在之前沒有密鑰的地方添加了新密鑰，則為 null

storageArea(read only)

返回表示受影響的存儲(chǔ)區(qū)域的存儲(chǔ)對(duì)象。

url(read only)

返回一個(gè)字符串，其中包含密鑰被更改的文檔的 url

以下是有關(guān) localStorage 的一些有趣事實(shí)

• localStorage始終以 UTF-16 字符串格式存儲(chǔ)。整數(shù)鍵被轉(zhuǎn)換為字符串并存儲(chǔ)在localStorage中
• localStorage數(shù)據(jù)特定于瀏覽器和網(wǎng)站的協(xié)議。比如在HTTP和HTTPS中是不一樣的
• 對(duì)于從file本地存儲(chǔ)的要求加載的文檔是未定義的，并且對(duì)于不同的瀏覽器是不同的
• localStorage隱身或私人瀏覽器在瀏覽器關(guān)閉時(shí)被刪除

本地存儲(chǔ)限制

以下是一些限制localStorage

• 限制最多 5MB 的數(shù)據(jù)
• 不要存儲(chǔ)敏感數(shù)據(jù)，localStorage因?yàn)樗梢院苋菀椎赝ㄟ^跨站點(diǎn)腳本訪問
• localStorage是同步的意味著它被一個(gè)接一個(gè)地訪問并且
• 不要用作localStorage數(shù)據(jù)庫。

檢測(cè) localStorage：測(cè)試可用性

瀏覽器兼容性

LocalStorage 與所有最新的瀏覽器兼容。只有非常非常舊的瀏覽器如 Internet Explorer 6 或 7 不支持localStorage

在某些情況下，例如用戶處于隱私窗口或用戶處于隱身窗口，當(dāng)用戶關(guān)閉窗口時(shí)數(shù)據(jù)將立即被刪除

用戶也可以禁用localStorage

例外情況

securityError

在以下情況下會(huì)引發(fā)安全錯(cuò)誤：

• Origin is not a valid scheme/host/port tuple 錯(cuò)誤。當(dāng)原點(diǎn)使用file:或data:計(jì)劃時(shí)會(huì)發(fā)生這種情況。許多現(xiàn)代瀏覽器將file:origin 視為不透明的 origin。這意味著來自同一文件夾的一個(gè)或多個(gè)文件被假定為來自不同的來源并且可能觸發(fā) CORS 錯(cuò)誤
• 該請(qǐng)求違反了政策決定。例如，用戶在瀏覽器上禁用了 localStorage

結(jié)論

在本文中，我解釋了 及其localStorage方法，以及如何使用它localStorage來保存數(shù)據(jù)和訪問數(shù)據(jù)、刪除數(shù)據(jù)和修改數(shù)據(jù)

以上就是JavaScript localStorage使用教程詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript localStorage的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！