JavaScript localStorage

什么是 localStorage？

LocalStorage 是一种 Web 存储类型，它允许 JavaScript 网站和应用程序存储和访问数据，而无需设置过期时间。这意味着数据将始终持久化且不会过期。因此，即使关闭浏览器窗口，存储在浏览器中的数据也将可用。

简而言之，我们可以说 localStorage 存储的数据没有过期时间，即使关闭浏览器窗口，用户也可以访问。它在很多方面都很有用，例如记住任何网站上的购物车数据或用户登录信息。

过去，cookie 是记住这种临时和本地信息的唯一选择，但现在我们也有了 localStorage。LocalStorage 的存储限制比 cookie 更高（5MB 对比 4MB）。它也不会与每个 HTTP 请求一起发送。因此，现在它是客户端存储的更好选择。需要注意 localStorage 的一些要点

• localStorage 不适合存储敏感数据，并且可以使用任何代码访问。因此，它相当不安全。
• LocalStorage 相较于 Cookies 的一个优点是它可以存储比 Cookies 更多的数据。您可以使用 localStorage 在浏览器中存储 5MB 的数据。
• localStorage 仅在浏览器中存储信息，而不是在服务器上。因此，localStorage 不能替代基于服务器的数据库。
• localStorage 是同步的，这意味着每个操作都按顺序执行。

什么是 Window.localStorage？

在 JavaScript 中，localStorage 属性可以通过 Window.localStorage 属性获得，因为它属于 Window 接口的一部分。这表明一个窗口包含其中的 DOM 树。它是一个内置的 Web API，提供了一种在 Web 浏览器中以键值对的形式保存数据的方式。它允许 Web 应用程序在客户端保存数据，这意味着即使页面或浏览器关闭，数据也会被保存。

它包括两者，意味着

• localStorage 永久保留数据
• sessionStorage 仅在页面会话期间存储数据。

何时使用 localStorage？

localStorage 可根据开发人员的需求在许多情况下使用，但其中一些情况包括：

1. 当您需要保留客户端存储时

与 sessionStorage 或任何其他方法不同，localStorage 会在浏览器中永久保留数据，除非代码或用户将其更改或删除。当您希望在页面和浏览器会话重新加载之间保留数据时，应使用它。

例如，浏览器会记住您是否将其设置为暗模式，或者购物车中的商品会在您删除或购买它们之前一直保存。

2. 当数据不敏感或不保密时

localStorage 可在 JavaScript 中访问。如果网站存在漏洞，攻击者试图窃取任何存在的数据，那将是一个问题，因为它默认情况下未加密。因此，应存储非敏感数据以保护其免受外部威胁。

例如，密码、身份验证令牌、任何其他信息等。

3. 当您想减少服务器负载时

这有助于提高 Web 应用程序的性能和响应能力。使用 localStorage 将结果和配置数据保存在客户端可以节省时间和带宽。它降低了频繁从服务器获取数据的需求。

例如，存储 UI 布局配置和缓存更新数据，如产品类别或标签。

4. 用于简单的键值对存储

localStorage 只接受字符串格式的数据，这意味着如果您必须使用任何其他存储数据的方式，例如数组或对象，您将需要使用 JSON.stringify 将数据转换为字符串，并使用 JSON.parse 来获取并随后使用它来存储在 localStorage 中。

localStorage 方法

localStorage 提供了一些方法供您使用。我们将通过示例讨论所有这些 localStorage 方法。在此之前，先对这些方法进行基本概述：

这些方法都与 localStorage 关键字一起使用，并通过点（.）字符连接。例如： localStorage.setItem()

请记住，localStorage 属性是只读的。

以下是一些用于在 localStorage 中添加、检索、删除和清除数据的方法。

setItem() 方法（在 localStorage 中存储数据）

此方法用于将数据存储在浏览器的 localStorage 对象中。当调用 localStorage.setItem(key, value) 时，定义的 值 将存储在浏览器 localStorage 的指定键下。它即使在浏览器关闭后也能保留数据，并可用于将来的使用。

语法

getItem() 方法（从 localStorage 检索数据）

此方法用于通过使用 setItem() 函数检索存储在 Web 浏览器中的指定键名下的内容。如果找不到键，它将返回 null 值。

语法

removeItem() 方法（从 localStorage 中删除数据）

此函数主要与 Web 存储 API 一起使用，特别是 localStorage 和 sessionStorage，用于删除键值对。它还需要键来执行任何操作。

语法

localStorage.removeItem("key");

clear() 方法（清除 localStorage 中的所有数据）

它是 localStorage 的一个简单 clear() 函数，用于删除当前域在 localStorage 中存储的所有键值对。它也不接受任何参数。

语法

key() 方法（检查 localStorage 中是否存在某个键）

key() 方法归 Storage 对象所有，并返回指定索引的键的名称。

length 属性

JavaScript 的 localStorage 对象中的 length 属性返回当前域在浏览器本地存储中当前存储的键值对的数量。它是一个只读属性。

语法

示例

以下是演示 localStorage 方法和属性的基本示例。它在一个程序中展示了每种方法的协同工作。

输出

当我们点击 设置数据 按钮时，数据将存储在 localStorage 中，并会显示以下消息：

当我们点击 获取数据 按钮时，数据将从 localStorage 中检索出来，并会显示以下消息：

当我们点击 移除一个项 按钮时，一个项（companyName）将从 localStorage 中移除，并会显示以下消息：

当我们点击 检查键 按钮时，它会检查 localStorage 并显示可用的键（city）

当我们点击 获取存储长度 按钮时，将显示 localStorage 中存储的数据的长度。

当我们点击 全部清除 按钮时，所有数据都将从 localStorage 中清除，并会显示以下消息：

当我们再次点击 检查键 按钮时，它会检查 localStorage，此时所有数据都已清除，因此会显示以下消息：

当我们再次点击 获取存储长度 按钮时，localStorage 中存储的数据的长度将为 0，并会显示以下消息：

localStorage 的特性

以下是 JavaScript 中 localStorage 函数的一些重要特性：

• 在浏览器中存储数据：此函数有助于直接在浏览器中存储数据。因此，您无需外部数据库或服务器来存储信息。
• 关闭后数据仍然存在：使用 localStorage 在浏览器中存储的数据即使在关闭浏览器后仍会保留在浏览器中，并且可以在
• 有限的存储空间：其存储空间非常有限，约为 5MB 至 10MB，这对于小数据来说很容易，但不适合大型文件。
• 仅适用于同一网站：存储的数据只能在该特定网站上访问。其他地方不允许其运行。
• 仅存储字符串：此函数仅适用于字符串。因此，如果您想在任何数组或对象中使用它，您必须先使用 stringify 将其转换为字符串，并使用 parse。

localStorage 的优点

localStorage 带来了一些优点。首先也是最重要的优点是，它可以在浏览器中存储临时但有用的数据，即使在关闭浏览器窗口后数据仍然存在。以下是其中一些优点的列表：

1. 提高性能

localStorage 有助于减少 Web 应用程序重复发出的服务器请求需求，从而缩短加载时间并提高用户界面的响应速度。这仅适用于依赖动态内容或频繁访问数据的应用程序。

2. 改进用户体验

localStorage 有助于开发人员为用户构建更个性化的体验，因为他们的偏好设置和配置会本地存储。这为您提供了跨会话和设备平滑过渡，意味着用户可以从上次离开的地方继续使用存储的数据，而无需进行任何重新配置。

3. 离线功能

LocalStorage 的优点中最重要的是它提供了离线功能。用户即使在离线状态下也可以处理本地存储的数据，它提供了持续的用户体验，不受网络条件的影响。

4. 支持字符串化复杂数据

localStorage 只接受字符串值并在 Web 浏览器中存储它们，但是如果您想使用数组或对象，可以使用 JSON.stringify() 和 JSON.parse() 将它们转换为字符串并进一步使用。

5. 跨平台支持

Chrome、Firefox、Edge、Safari 等所有主流现代浏览器都支持此功能。因此，您几乎可以在所有环境中安全地使用它。

localStorage 的局限性

虽然 localStorage 允许存储短期本地数据，即使在关闭浏览器窗口后数据仍然存储，但它也有一些局限性。以下是 localStorage 的一些局限性：

1. 有限的数据结构

localStorage 不支持像高级数据库那样的复杂数据存储。它仅限于简单的键值数据存储。由于这种限制，它不适合复杂的数据结构或管理它们元素之间的关系。

2. 非异步阻塞 API

一个重要的缺点是 JavaScript 中的 localStorage 作为一个非异步阻塞 API 工作，这意味着对 localStorage 的任何操作都可能阻塞主线程，从而导致 Web 应用程序性能下降和响应迟缓。

3. 字符串化开销

当我们对任何 JSON 数据进行字符串化以将其存储在 localStorage 中时，它会降低性能，并在字符串化之前将操作速度减慢至少 10 倍。

4. 标签页阻塞

当您在系统中同时使用多个标签页时，单个标签页的 localStorage 可以通过控制 CPU 的资源来影响其他标签页的性能。您可以通过在两个浏览器中检查单个文件并在其中一个中插入 localStorage 来证明这一点。

5. 缺乏索引

localStorage 没有索引功能，这使得根据特定标准执行任何搜索或遍历数据变得困难。这可能会影响依赖检索复杂数据的应用程序。

浏览器兼容性

localStorage 已在 HTML5 中指定，并得到 Chrome 等多种浏览器的支持。以下是支持 JavaScript localStorage 的不同浏览器及其版本的列表。

浏览器	Chrome	Internet Explorer	Firefox	Opera	Safari	Edge
版本支持	4.0	8.0	3.5	11.5	4	12

结论

使用 JavaScript localStorage 可以节省您的时间，方便恢复数据，并且每个组件都不同。本文根据程序的需求，通过使用给定的方法描述了如何使用 localStorage。任何有益和有用的东西也有其自身的缺点，如本文所述。localStorage 是前端开发人员的救星，因为数据库和后端概念（如 Node.js）不需要这些路由。

存储在 localStorage 中的数据会在浏览器会话之间保留，这意味着即使您关闭浏览器，数据仍会保留，并且不会被删除。这为 JavaScript 提供了对浏览器开放的访问权限，用于在 Web 浏览器中存储键值对，而没有任何过期日期。

常见问题解答 (FAQs)

1. JavaScript 中的 localStorage 是什么？

在 JavaScript 中，允许 Web 浏览器在用户浏览器中本地存储数据的功能是 localStorage。即使您关闭浏览器，存储的数据也会被保存，并在稍后打开时再次使用。这有助于跟踪用户偏好等内容。

2. 如何在 localStorage 中存储数据？

数据使用 setItem() 方法以键值对的形式存储，其中键和值都必须是字符串。

3. 为什么应该使用 localStorage？

localStorage 方法用于存储非敏感且需要在浏览器会话之间保留的数据，例如用户偏好、主题设置或缓存的应用程序状态。

4. localStorage 的局限性是什么？

localStorage 的局限性包括：

• 安全性：数据未加密。
• 同步：它是一个同步 API，这意味着在存储或检索大量数据时可能会阻塞主线程。
• 容量有限：存储容量约为 5MB，不足以容纳大型数据集。

5. 如何从 localStorage 中删除数据？

可以使用带有所指定键的 removeItem() 方法删除独立项。