JavaScript 工具：localStorage 和 sessionStorage

JavaScript（通常简称为 JS）是现代 Web 基础设施的基石之一。它是一种轻量级、解释型、面向对象的编程语言，支持头等函数（first-class functions）。JavaScript 最为人所知的是它在动态网页中的实现。然而，由于其特性，JavaScript 也被用于非浏览器环境中。

在本指南中，我们将详细讨论两个 JavaScript 对象: localStorage 和 sessionStorage.

localStorage 和 sessionStorage 概述

对象 localStorage 和 sessionStorage 是作为 Web Storage API 的一部分提供的。它是本地存储键值对的绝佳工具。使用 localStorage 和 sessionStorage 是 Cookie 的绝佳替代方案。这种方法提供了一些额外的优势：

• 数据存储在本地，无法被服务器读取。这消除了 Cookie 的安全问题。
• 它允许更高的存储容量（对于大多数现代浏览器，最高可达 10 MB）。
• 简单直观的语法。

所有现代网页浏览器都支持这些对象，因此不会存在浏览器兼容性问题。Cookie 在许多情况下仍然很有用，例如身份验证。然而，在某些情况下， localStorage 和 sessionStorage 提供了更好的解决方案。

前提条件

要执行本教程中所示的步骤，您需要以下组件：

• 配置妥当的 Linux 服务器。本指南演示了 在 CloudSigma 上设置您自己的 Ubuntu 服务器.
• Node.js 作为 JavaScript 运行时。在此处了解更多关于 在 Ubuntu 上安装 Node.js 的信息.
• 现代网页浏览器，例如 Google Chrome 或 Firefox.

为了进行演示，我们获取了一个附带 JS 脚本的示例网页。您可以在此处了解更多关于 将 JavaScript 添加到 HTML 文件中的信息:

至于文本编辑器，我们将使用 Visual Studio Code:

localStorage 和 sessionStorage 之间有什么区别？

两者 localStorage 和 sessionStorage 都源自同一个 API。它们的行为也完全相同。唯一的区别在于每个对象允许数据持久化的方式。在 sessionStorage 的情况下，数据会一直保留到窗口或标签页关闭。而使用 localStorage, the data persists until the browser cache is cleared or the web app clears it.

在本教程中，我们将主要关注 localStorage。然而， sessionStorage 的语法是相同的。我们将展示如何使用 localStorage.

步骤 1 – 创建条目

我们可以使用 localStorage 对象声明一个条目，通过使用 setItem()。此方法接受两个参数：键和其对应的值。该方法结构如下：

在以下示例中，我们创建了一个变量 key。使用 setItem() 方法，我们设置了一个新的 key 并将其值设置为 ‘value’:

步骤 2 – 读取条目

现在，我们如何读取存储在键中的值？要从 localStorage 获取键，我们将使用方法 getItem()。它接受键的名称并返回存储在键中的值。我们将使用 alert() 方法来显示我们获取的内容：

接下来，在网页浏览器中打开该网页。它应该会显示存储在 key:

步骤 3 – 更新条目

一旦设置了值，除非对其进行更改，否则它将保持不变。如果我们再次在同一个 setItem() 上使用 key 方法，它将自动用新值替换旧值。

在以下示例中， key 首先被初始化为值 ‘value’。在下一行中，我们再次调用了 setItem() 并将值设置为 ‘new value’:

让我们看看在浏览器中运行这段代码时会发生什么：

正如我们所见，该键的值被设置为 ‘new value’.

步骤 4 – 删除条目

如果 localStorage （以及 sessionStorage 也一样）不再需要，建议在之后清除它们。这可以释放更多空间供以后使用。应用程序的内存效率也会更高。

要从 localStorage 中删除条目，有一个专用的方法 removeItem()。它接受 key 作为参数，并将其从 localStorage 数据池中移除：

让我们在脚本中实现它：

运行时，输出为 null，因为该 key:

步骤 5 – 清除条目

在前面的示例中，我们只删除了一个键。然而， localStorage 允许一步清除所有存储的项。要清除所有条目， localStorage 提供了方法 clear()。它不需要参数：

实际运行该方法：

就像之前一样，它会清除 localStorage 中的所有条目，所以当尝试访问 key 值时，它会返回 null:

步骤 6 – 使用 JSON

• 存储对象和数组

The localStorage 和 sessionStorage 对象只能存储字符串值。然而，有时您必须处理对象或数组。在这种情况下，我们需要将它们转换为字符串。

JavaScript 提供了 JSON.stringify() 功能，它将接收数组/对象并将其转换为字符串。本文简要介绍了 JSON 格式的快速概览。要获取更详细的指南，您可以阅读 JavaScript 中的 JSON.

在此示例中，我们创建了一个对象 sampleObj ，包含两个字段 name 和 location。我们将把它转换为字符串并存储在 key:

在这里，输出将是包含对象数据的字符串：

• 读取对象 and 数组

在存储时，我们将对象和数组转换成了字符串。我们也可以将这个字符串转换回其原始格式。为此，我们将使用方法 JSON.parse()。它接受一个字符串并将其转换回 JSON 格式：

至于输出，我们将其重新转换为字符串并进行了格式化，以便更好地查看：

步骤 7 – 检查 localStorage 中的项

在本节中，我们将展示一个简单的测试，以确定 localStorage 和 sessionStorage 是否包含任何项。使用一个简单的 if 语句，我们可以检查 localStorage 或 sessionStorage 的长度。如果存在项，长度将大于 0。

首先，实现以下示例：

在这里，输出将是 ‘true’，因为在 localStorage 中存在一个键:

步骤 8 – 遍历项

The localStorage 和 sessionStorage 对象以类数组结构存储键。它们不支持 forEach 方法，因此我们必须遵循使用 for 循环来遍历每个项。

在以下示例中，我们将检查 localStorage 是否为空。如果不为空，我们将遍历每个项：

输出将逐个显示所有项：

步骤 9 – 检查浏览器支持

我们可以通过检查 localStorage（以及 sessionStorage）是否在 window 对象上可用来检查其支持情况。一个简单的 if 语句即可搞定：

在 Web 浏览器中运行代码：

结语

本指南演示了如何使用 localStorage 和 sessionStorage 对象在 JavaScript 中在浏览器中存储键/值对。其语法使用起来要简单得多。我们展示了如何创建、删除和更新键/值对。我们还解决了通过将对象和数组转换为字符串（反之亦然）来存储它们的问题。

要进一步加深您对 JavaScript 的了解，可以查看 我们博客的以下教程：:

• JavaScript 基础：如何处理日期和时间
• JavaScript：关于如何索引、拆分和操作字符串的教程
• 使用 JavaScript：类是如何运作的
• 使用 JavaScript：原型和继承是如何运作的

祝您编程愉快！