JavaScript localStorage：完整指南

2025-06-08

JavaScript localStorage：完整指南

介绍

JavaScriptlocalStorage本质上是存储在浏览器Window对象中的。你可以将任何内容存储在 JavaScript 中localStorage，即使页面加载，浏览器关闭并重新打开，它也会一直存在。

localStorage及其相关内容sessionStorage是 Web Storage API 的一部分。我们将在下面详细了解这些内容

什么是 Web 存储 API？

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

Web 存储 API 中存储的键/值对始终为字符串形式。（整数键会自动转换为字符串）

Web Storage API 提供了一组方法来访问、删除、修改键/值对

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

  1. sessionStorage

  2. localStorage

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

什么是 LocalStorage？

LocalStrorage是 Web 存储 API 的一部分。它允许您将持久数据（浏览器重新加载、关闭并重新打开时仍保留的数据）Window以字符串的键值对形式存储在浏览器对象中。

localStorage 有五种方法，分别是：

  1. 设置项目

  2. 获取项目

  3. 删除项目

  4. 清除

  5. 钥匙

sessionStorage 和 localStorage 的区别

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

  • sessionStorage仅在浏览器打开时可用，当浏览器关闭时将sessionStorage被删除。（sessionStorage\当浏览器重新加载时可用，但当浏览器关闭时 sessionStorage 将被删除）

  • 这localStorage是持久数据，即使浏览器关闭，localStorage数据仍保留在浏览器中

  • localStorage可由用户手动删除，当用户处于隐身窗口或私人窗口并关闭浏览器时，会自动删除

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

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

我们将学习LocalStorage以下方法

localStorage 方法

中有五种方法localStorage。这些方法可以让你存储项目、获取项目、移除项目和清除localStorage。

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

使用 localStorage.setItem API，您可以在本地存储中存储键/值对。下面是如何存储数据的示例。

window.localStorage.setItem('candy name', 'Mars Bar');
Enter fullscreen mode Exit fullscreen mode

是candy name键，Mars Bar是值。正如我们提到的，localStorage 仅存储字符串。

你可以在浏览器中尝试一下。以下是在 Chrome 浏览器中存储数据的示例

图片描述

localStorage使用存储数据的方法有很多种setItem。您可以像下面这样访问 Object 中的数据：

window.localStorage.candyName = 'Mars';
window.localStorage['candyName'] = 'Mars';
window.localStorage.setItem('candyName','mars');
Enter fullscreen mode Exit fullscreen mode

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

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

使用类似对象的符号

图片描述

2. getItem()：从 localStorage 中检索数据

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

getItem() 接受一个键并以字符串形式返回该值

这将返回如下值Mars Bar

图片描述

使用对象符号

使用对象符号，您也可以访问数据（尽管不推荐）

window.localStorage.candyName
returns 'Mars'
window.localStorage['candy2']
returns 'turtles'
Enter fullscreen mode Exit fullscreen mode

图片描述

3. removeItem() 从 localStorage 中删除一个项目

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

将需要删除的项目的键传递给removeItem方法，它将从localStorage

window.localStorage.removeItem('candies');
Enter fullscreen mode Exit fullscreen mode

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

图片描述

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

4. clear() 清除 localStorage

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

window.localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

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

我们将使用长度来检查localStorage

图片描述

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

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

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

window.localstorage.key(index)
Enter fullscreen mode Exit fullscreen mode

让我们使用控制台来查看密钥如何工作

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

window.localStorage.candyName = 'Mars'
window.localStorage['candy2'] = 'turtles'
Enter fullscreen mode Exit fullscreen mode

让我们用它length来检查 localStorage 的内容

window.localStorage.length
Enter fullscreen mode Exit fullscreen mode

图片描述

你知道索引从 0 开始。让我们看看索引 0 是什么

图片描述

让我们看看索引 1 是什么

图片描述

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

存储属性

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

长度是接口的只读属性localStorage。它返回存储在localStorage

window.localStorage.length
Enter fullscreen mode Exit fullscreen mode

我们可以使用长度属性来测试是否localStorage已填充。

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

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

window.localStorage.length
2
Enter fullscreen mode Exit fullscreen mode

图片描述

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

图片描述

它返回 0。因此我们知道如果 length 属性返回 0，那么 localStorage 就是空的

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

存储事件

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

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

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

构造函数

StorageEvent()

返回一个新StorageEvent对象

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

创建 StorageEvent 的新实例

new window.StorageEvent(keys)
Enter fullscreen mode Exit fullscreen mode

返回

图片描述

实例属性

键（只读）

返回一个表示已更改键的字符串。如果更改是由 clear() 方法引起的，则 key 属性为 null

newValue（只读）

返回一个包含已更改键的新值的字符串。如果已使用 clear() 方法或键已被移除，则返回 null。

oldValue（只读）

返回一个包含键原始值的字符串。如果添加了新键，而之前没有键，则返回 null。

存储区域（只读）

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

url（只读）

返回一个字符串，其中包含被更改键的文档的 URL

LocalStorage：有趣的事实

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

  1. localStorage始终以 UTF-16 字符串格式存储。整数键将转换为字符串并存储在 localStorage 中

  2. localStorage数据特定于浏览器和网站的协议。例如，HTTP 和 HTTPS 中的数据是不同的

  3. 对于从filelocalstorage 加载的文档，其要求是未定义的，并且对于不同的浏览器是不同的

  4. localStorage隐身或私人浏览器会在浏览器关闭时被删除

Dead Simple Chat 允许您使用强大的Javascript 聊天 API 和 SDK轻松地将聊天添加到任何网络和移动应用程序。

LocalStorage 限制

以下是一些限制localStorage

  • 数据限制为 5MB

  • 不要存储敏感数据，localStorage因为跨站点脚本很容易访问它

  • localStorage是同步的，意味着它被一个接一个地访问，并且

  • 不要用作localStorage数据库。

检测 localStorage：测试可用性

浏览器兼容性

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

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

用户还可以禁用localStorage

例外

securityError

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

  • 源不是有效的方案/主机/端口元组错误。当源使用file:或data:方案时会发生这种情况。许多现代浏览器将file:源视为不透明源。这意味着来自同一文件夹的文件会被视为来自不同来源，并可能触发 CORS 错误。

  • 该请求违反了策略决策。例如，用户已在浏览器上禁用 localStorage

结论

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

注：本文最初发表于 DeadSImpleChat 博客：JavaScript localStorage：完整指南

鏂囩珷鏉ユ簮锛�https://dev.to/alakkadshaw/javascript-localstorage-the-complete-guide-5a9a
Devto 翻译
PREV
适用于编程博客的 5 个最佳 Gatsby 插件
NEXT
关于优先考虑副业项目 1. 它是否有助于我的职业和个人成长？ 2. 它是否解决了具体问题？ 3. 我对它有多热情？ 成果资源