首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript localStorage

JavaScript localStorage使用教程详解

2023-06-19 09:19:32 作者：happyEnding

JavaScriptlocalStorage基本上是浏览器Window对象中的存储，您可以在中存储任何内容localStorage，localStorage及其相关的sessionStorage是 Web Storage API的一部分，我们将在本文详细了解这些,需要的朋友可以参考下

什么是网络存储 API？

Web Storage API 提供了浏览器可以存储键/值对数据（如对象）的方法。

存储在网络存储 API 中的键/值对总是以字符串的形式存在。（整数键自动转换为字符串）

Web Storage API 提供了一组方法，您可以使用它们来访问、删除修改键/值对

Web Storage API 中有两种类型的存储可用

sessionStorage
localStorage

什么是本地存储？

LocalStrorage是网络存储 API 的一部分。它允许您将持久数据（数据保留在浏览器重新加载以及浏览器关闭和重新打开时）Window作为键/值对字符串存储在浏览器对象中。

localStorage 有五种方法，它们是：

setItem
getItem
removeItem
clear
key

sessionStorage 和 localStorage 的区别

和sessionStorage都是localStorageWeb 存储 API 的一部分。

仅在浏览器打开之前可用sessionStorage，当浏览器关闭时，将sessionStorage被删除。（sessionStorage在浏览器重新加载时可用，但在浏览器关闭时 sessionStorage 被删除）
这localStorage是持久数据，即使浏览器关闭，localStorage数据仍保留在浏览器中
localStorage可由用户手动删除，当用户处于隐身窗口或隐私窗口且用户关闭浏览器时自动删除

和sessionStorage都localStorage提供了类似的方法来访问和存储浏览器中的数据

我们将更多地了解LocalStorage以下方法

本地存储方法

中有五个方法localStorage。这些方法可让您存储项目、获取项目、删除项目和清除localStorage.

1. setItem()：将数据存储到localStorage

使用 localStorage.setItem API，您可以将键/值对存储在本地存储中。这是一个关于如何存储数据的例子。

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

thecandy name是键，theMars Bar是值。正如我们提到的，localStorage 只存储字符串。

您可以在浏览器本身中尝试此操作。这是在 chrome 浏览器中存储数据的示例

localStorage在using中有多种存储数据的方法setItem。您可以通过以下方式访问对象中的数据：

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

允许但不建议以类似对象的方式存储或访问数据，因为用户生成的密钥可以通过任何类似toString或length或 localStorage 的任何其他内置方法名称

在这种情况下，getItemandsetItem可以正常工作，但 Object like 方法将失败

使用类似对象的符号

2. getItem()：从localStorage中获取数据

使用 getItem API，我们可以检索存储在 localStorage 中的键/值对

getItem() 接受一个键并将值作为字符串返回

这将返回值作为Mars Bar

使用对象表示法

使用对象表示法，您还可以访问数据（尽管不推荐这样做）

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

3. removeItem() 从本地存储中删除一个项目

localStorage您可以使用该removeItem方法删除任何项目

将您需要删除的项目的键传递给该removeItem方法，并将其从localStorage

window.localStorage.removeItem('candies');

让我们使用控制台看看 removeItem 是如何工作的。首先，我们将使用 length 属性来检查本地存储中有多少项

如您所见，当我们使用 length 属性时，它显示localStorage. 在我们删除一个项目后，现在本地存储中只剩下一个项目

4. clear() 清除localStorage

使用Clear()localStorage API 的方法，您可以清除整个 localStorage 并删除 localStorage 中的所有数据

window.localStorage.clear();

让我们使用控制台看看 clear 方法是如何工作localStorage的

我们将使用长度来检查项目的数量localStorage

5. key() 返回存储中的第n个键

key 方法可以传递任何整数，它将返回存储在存储对象中第 n 个键的键

window.localstorage.key(index)

让我们使用控制台看看密钥是如何工作的

我们已经将键/值对放在 localStorage 中，例如

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

让我们使用length检查 localStorage 的内容

window.localStorage.length

如您所知，索引从 0 开始。让我们看看索引 0 处有什么

让我们看看索引 1 是什么

存储属性

length : 存储在本地的键/值对的数量

长度是接口的只读属性localStorage。它返回存储在中的键/值对的数量localStorage

window.localStorage.length

我们可以使用 length 属性来测试是否localStorage填充了。

到目前为止，我们已经多次使用了 length 属性，您可能已经熟悉了。

让我们在不同的用例中使用长度属性来进一步探索它的用途。让我们打开控制台，看看如何使用 length 属性

window.localStorage.length
2

现在 length 属性也可以用来检查 localStorage 是否为空。让我们清除 localStorage，看看如果我们使用 length 属性会发生什么

它返回 0。因此我们知道如果 length 属性返回 0，则 localStorage 为空

存储事件

每当对存储对象进行更改时都会触发存储事件

当窗口有权访问的存储区域在另一个文档的上下文中发生更改时，将 StorageEvent 发送到窗口

存储事件是每当发生更改时都会触发的事件，您可以收听存储事件并在您的网站或应用程序中做出适当的决定。

构造器

StorageEvent()

返回一个新StorageEvent对象

让我们使用控制台创建一个新的 storageEvent() 实例

创建 StorageEvent 的新实例

new window.StorageEvent(keys)

回报

实例属性

Keys (read only)

返回表示已更改的键的字符串。当由 clear() 方法引起变化时，key 属性为 null

newValue(read only)

返回一个字符串，其中包含已更改的键的新值。当使用 clear() 方法或密钥已被删除时为 null

oldValue(read only)

返回具有键的原始值的字符串。如果在之前没有密钥的地方添加了新密钥，则为 null

storageArea(read only)

返回表示受影响的存储区域的存储对象。

url(read only)

返回一个字符串，其中包含密钥被更改的文档的 url

以下是有关 localStorage 的一些有趣事实

localStorage始终以 UTF-16 字符串格式存储。整数键被转换为字符串并存储在localStorage中
localStorage数据特定于浏览器和网站的协议。比如在HTTP和HTTPS中是不一样的
对于从file本地存储的要求加载的文档是未定义的，并且对于不同的浏览器是不同的
localStorage隐身或私人浏览器在浏览器关闭时被删除

本地存储限制

以下是一些限制localStorage

限制最多 5MB 的数据
不要存储敏感数据，localStorage因为它可以很容易地通过跨站点脚本访问
localStorage是同步的意味着它被一个接一个地访问并且
不要用作localStorage数据库。

检测 localStorage：测试可用性

浏览器兼容性

LocalStorage 与所有最新的浏览器兼容。只有非常非常旧的浏览器如 Internet Explorer 6 或 7 不支持localStorage

在某些情况下，例如用户处于隐私窗口或用户处于隐身窗口，当用户关闭窗口时数据将立即被删除

用户也可以禁用localStorage

例外情况

securityError

在以下情况下会引发安全错误：

Origin is not a valid scheme/host/port tuple 错误。当原点使用file:或data:计划时会发生这种情况。许多现代浏览器将file:origin 视为不透明的 origin。这意味着来自同一文件夹的一个或多个文件被假定为来自不同的来源并且可能触发 CORS 错误
该请求违反了政策决定。例如，用户在浏览器上禁用了 localStorage

结论

在本文中，我解释了及其localStorage方法，以及如何使用它localStorage来保存数据和访问数据、删除数据和修改数据

以上就是JavaScript localStorage使用教程详解的详细内容，更多关于JavaScript localStorage的资料请关注脚本之家其它相关文章！