JavaScript 中的 LocalStorage

介绍

填写表单时不小心关闭网页会让人非常恼火。所有填写的数据都会丢失，不得不重新开始。本文将介绍如何在 JavaScript 中使用 localStorage 来存储数据，使其在浏览会话结束后仍然有效。我们将演示如何使用 localStorage 和 Window.localStorage 属性，并回顾 JavaScript 中 Web 存储的基础知识。.

JavaScript 中的 LocalStorage 是什么？

localStorage 是一项允许网站和 JavaScript 应用程序在 Web 浏览器中存储键值对的功能，且存储的数据没有过期时间。这意味着即使在用户关闭浏览器或重启计算机后，存储的数据仍然有效。.

localStorage 是 window 对象的一个属性，它使 window 对象成为一个全局对象，可以与浏览器窗口进行交互和操作。它还可以与其他 window 属性和方法结合使用。.

什么是 Window.localStorage？

localStorage 机制可通过 Window.localStorage 属性访问。Window.localStorage 是 JavaScript 中 Window 接口的一部分，它表示一个包含 DOM 文档的窗口。.

Window 接口包含丰富的函数、构造函数、对象和命名空间。Window.localStorage 是一个只读属性，它返回对本地存储对象的引用，该对象用于存储仅创建它的资源可以访问的数据。.

何时使用 localStorage

简单来说，localStorage 用于存储和检索数据。虽然您可以使用 localStorage 存储少量数据，但它不适合存储大型数据集。任何使用该设备的人都可以访问 localStorage，因此您不应该使用它来存储敏感信息。您可以使用它来存储用户偏好设置，例如语言或主题。如果数据使用频繁，您也可以使用它来缓存数据。localStorage 可以存储表单数据，即使用户关闭浏览器，这些数据也不会丢失。.

如果你的应用程序需要用户登录，可以使用 localStorage 来持久化会话数据。即使关闭并重新打开浏览器，你仍然可以登录。稍后我们将在本教程中使用一个简单的应用程序来演示这一点。.

localStorage 存储在哪里？

在 Google Chrome 浏览器中，Web 存储数据存储在用户配置文件子文件夹中的 SQLite 文件中。该子文件夹在 Windows 系统中位于 \AppData\Local\Google\Chrome\User Data\Default\Local Storage，在 macOS 系统中位于 ~/Library/Application Support/Google/Chrome/Default/Local Storage。Firefox 浏览器则将存储对象存储在名为 webappsstore.sqlite 的 SQLite 文件中，该文件也位于用户配置文件文件夹中。.

Web Storage API 简介

localStorage 是 Web Storage API 中的两种机制之一，另一种是 sessionStorage。Web Storage API 是一组机制，使浏览器能够存储键值对。它的设计比使用 cookie 更加直观。.

键值对代表存储对象，它们类似于对象，但它们在页面加载期间保持不变，并且始终是字符串类型。您可以像访问对象一样访问这些值，也可以使用 `getItem()` 方法（稍后会详细介绍）。.

sessionStorage 与 localStorage

sessionStorage 和 localStorage 都为每个页面会话期间可用的资源提供独立的存储区域。它们的主要区别在于 sessionStorage 只维护一个存储区域。此外，在浏览器打开期间（包括页面重新加载或刷新），sessionStorage 始终保持运行；而 localStorage 在浏览器关闭后仍会继续存储数据。.

localStorage 存储的数据永不过期，而 sessionStorage 仅存储会话期间的数据。需要注意的是，在隐身浏览会话中加载的 localStorage 数据会在最后一个隐身标签页关闭后被清除。当需要临时存储数据时，可以使用 setItem SessionStorage 方法，并且应该在不需要数据持久化到当前会话之外的情况下使用。.

与 localStorage 相比，SessionStorage 的存储容量通常较低，每个资源通常只有几兆字节。这使得它适合在用户会话期间存储临时数据，而不会消耗过多的浏览器资源。.

另一方面，LocalStorage 提供更大的存储容量，通常每个源的存储容量为 5 到 10 MB。它适合存储需要在多个会话之间持久保存的大量数据。.

本地存储的优点和缺点

JavaScript 中的 localStorage 是存储客户端数据的重要工具。然而，它也存在一些优缺点，您应该加以考虑。.

好处

LocalStorage 的第一个优势我们之前已经多次提到过，那就是存储的数据不会过期。即使离线，您仍然可以访问这些数据，而且 localStorage 存储的数据无需网络连接即可使用。.

使用 localStorage 存储数据比使用 cookie 更安全，而且您可以更好地控制自己的数据。此外，localStorage 的存储容量也比 cookie 大。cookie 只能存储 4 KB 的数据，而 localStorage 最多可以存储 5 MB 的数据。.

缺点

localStorage 是同步的，这意味着每个操作都必须按顺序执行。对于较小的数据集来说，这几乎不会造成问题，但随着数据量的增长，这可能会成为一个大问题。.

虽然 LocalStorage 比 cookie 更安全，但您仍然不应该使用它来存储敏感数据。任何能够访问用户设备的人都可以访问存储在 LocalStorage 中的数据。此外，LocalStorage 只能存储字符串，因此如果您想存储其他类型的数据，则需要将其转换为字符串。最后，使用 LocalStorage 存储过多数据可能会降低应用程序的运行速度。.

LocalStorage 的工作原理是什么？

你肯定已经听过很多次了——localStorage 用于存储数据。而存储数据就意味着你以后可能需要检索这些数据。在本节中，我们将详细了解 localStorage 的工作原理。以下是其工作原理的简要概述：

• setItem()：将键和值添加到 localStorage。
• getItem()：从本地存储中检索/获取项目
• removeItem()：从 localStorage 中移除一个项目
• clear(): 清除 localStorage 中的所有数据
• key()：存储一个用于检索本地密钥的数字

使用 setItem() 保存数据

`setItem()` 方法允许你将值存储到 `localStorage` 中。它接受两个参数：一个键和一个值。键可以稍后用于获取关联的值。以下是它的示例：

localStorage.setItem('name', 'Obaseki Nosa');

在上面的代码中，你可以看到 name 是键，Obaseki Nosa 是值。正如我们之前提到的，localStorage 只能存储字符串。要将数组或对象存储到 localStorage 中，你需要将它们转换为字符串。.

为此，我们在将 JSON 对象传递给 setItem() 之前，使用 JSON.stringify 方法对其进行字符串化处理，如下所示：

const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));

使用 getItem() 获取信息

getItem() 方法允许您访问存储在浏览器 localStorage 对象中的数据。此方法仅接受一个参数（键），并返回字符串形式的值：

localStorage.getItem('name');

这将返回一个值为“Obaseki Nosa”的字符串。如果指定的键在 localStorage 中不存在，则返回 null。对于数组，我们使用 JSON.parse() 方法，该方法将 JSON 字符串转换为 JavaScript 对象：

JSON.parse(localStorage.getItem('user'));

使用我们上面创建的数组，以下是如何从 localStorage 中检索它的方法：

const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);

此方法返回数组 [“Obaseki”, 25]。您可以在网页中查看并在控制台中找到它，如下所示：

这张图片来自 Firefox 浏览器，所以在其他浏览器中看起来会略有不同。我们把它和另一个未使用 localStorage 存储的数组进行比较：

const userArray2 = ["Oscar", 27];
console.log(userArray2);

现在，控制台中显示了两个数组，如下所示：

通常情况下，如果你在代码编辑器中注释掉这些代码，它们应该会从控制台消失。但是，存储在 localStorage 中的任何内容都会保留下来。例如：

使用 removeItem() 删除数据

要从 localStorage 中删除一个项，可以使用 removeItem() 方法。当传入键名时，removeItem() 方法会从内存中删除已存在的键。如果给定的键没有关联的项，则此方法不执行任何操作。以下是代码：

.localStorage.removeItem('name');

如何删除 localStorage 中的所有内容：clear()

要删除 localStorage 中的所有内容，可以使用 clear() 方法。调用此方法后，会清除该域的所有记录，并将整个存储空间清空。此方法不接受任何参数。请使用以下代码：

localStorage.clear();

如何获取键名：key()

当您需要遍历键，但仍能将数字或列表传递给 localStorage 以检索键名时，`key()` 方法非常有用。它的示例如下：

localStorage.key(index);

index 参数表示要检索的键的从零开始的索引。.

localStorage 与 cookie

LocalStorage 和 Cookie 都用于存储客户端数据。正如我们之前提到的，Cookie 最多只能存储 4 KB 的数据，这远小于 LocalStorage 的 5 MB 存储容量。.

每次 HTTP 请求都会自动向服务器发送 Cookie，但 localStorage 则保留在用户设备本地。这可以提升网站性能，并且由于不与服务器共享数据，因此不会增加网络流量。.

正如我们所见，存储在 localStorage 中的数据不会过期。除非您手动删除，否则它会一直保留在那里。而 Cookie 则可以设置为在一段时间后过期，或者在浏览器关闭时立即过期。Cookie 通常存储用户偏好设置和登录/身份验证信息等数据。这些数据可以在所有浏览器标签页和窗口中访问。但是，localStorage 仅存储可通过特定协议或域访问的数据。.

浏览器本地存储支持

localStorage 是一种 Web 存储类型，是 HTML5 规范的一部分。它被包括 Internet Explorer v8 在内的主流浏览器所支持。您可以使用以下代码片段来检查浏览器是否支持 localStorage：

if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}

管理 localStorage 数据的高级技巧

接下来，我们将探讨一些管理本地存储数据的高级技巧。我们将学习如何有效地删除键，应用最佳实践来存储和组织对象，以及如何使用 JSON 解析和字符串化来处理复杂数据。.

有效移除钥匙

有效地从存储在 localStorage 中的对象中移除键对于优化存储空间至关重要，尤其是在构建数据频繁更新或删除的应用程序时。移除不必要的键有助于防止 localStorage 中堆积无用数据。.

要有效地从 localStorage 中的对象中删除某个键，您可以先使用该键检索对象，删除所需的属性，然后将更新后的对象返回到 localStorage。这样可以最大限度地减少不必要的数据操作和存储开销：

// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));

保存和整理对象

JSON 解析和字符串化是管理在 localStorage 中存储和检索数据时复杂数据结构的强大技术。它们可以轻松实现 JavaScript 对象和 JSON 字符串之间的转换，从而提高数据管理和操作的效率。.

当在 localStorage 中存储对象或数组等复杂数据结构时，必须先使用 JSON.stringify() 将其字符串化，然后再将其存储到 localStorage 中。这会将 JavaScript 对象转换为 JSON 字符串，然后可以将其作为键值对存储：

// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));

处理嵌套对象或数组时，务必确保所有嵌套对象都被字符串化和解析，以维护数据结构的完整性：

// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));

结果

本文探讨了 JavaScript 中 LocalStorage 的功能，它提供了一种简单高效的数据存储和检索方式，无需依赖 cookie。我们解释了何时以及如何使用 LocalStorage，以及如何在 LocalStorage 中存储、检索和删除数据。我们通过一个实际示例演示了 LocalStorage 的应用，并将其与 cookie 进行了比较。.

在这篇文章中，您学习了如何以及何时使用 localStorage。我们解释了如何在 localStorage 中存储、检索和删除数据项。我们还创建了一个可运行的应用程序，以了解 localStorage 在实际场景中的工作原理。最后，我们将其与 cookie 进行了比较。.

所以，您来对地方了，这里有一个很棒的工具，易于使用，并支持广泛的浏览器。.