JavaScript - 本地存储
本章将向您展示如何使用 JavaScript 的 localStorage 保存多个浏览器会话的数据。我们将演示如何使用 Window.localStorage 属性使用此方法，并介绍 JavaScript 中 Web 存储的原理。
JavaScript 中的 localStorage 是什么?
localStorage 功能允许 JavaScript 应用和网站在 Web 浏览器中保存键值对，且没有有效期。这意味着即使用户关闭浏览器或重启计算机，存储的数据仍然有效。
LocalStorage 是一个 window 对象属性，因此它可以与浏览器窗口交互并对其进行操作。它也可以与其他窗口设置和方法结合使用。
语法
以下语法返回一个存储对象，可用于获取当前源的本地存储空间。
myStorage = window.localStorage;
什么是 Window.localStorage?
localStorage 方法可以通过 Window.localStorage 属性访问。Window.localStorage 是一个 JavaScript Window 接口组件，表示一个包含 DOM 内容的窗口。
Window 接口包含大量的函数、构造函数、对象和命名空间。 Window.localStorage 是一个只读属性，它返回对本地存储对象的引用，该对象用于存储只能由创建它的源访问的数据。
何时使用 localStorage
简而言之，localStorage 可以安全地存储和检索数据。虽然 localStorage 可以保存少量数据，但它不适用于大型数据集。由于任何使用该设备的用户都可以访问 localStorage，因此您应该避免将关键信息保存在那里。您可以使用它来保存用户偏好设置，例如语言或主题。如果您经常使用它，它还可以用作数据缓存。LocalStorage 可以保存表单数据，以便在用户关闭浏览器时不会丢失。
如果您的应用程序要求您登录，您可以使用 localStorage 来存储会话数据。即使关闭并重新打开浏览器，您也可以保持登录状态。
localStorage 如何工作?
您之前可能听说过:localStorage 存储数据。而且，如果您保存了数据，以后可能需要访问它。在本节中，我们将详细了解 localStorage 的工作原理。以下是其工作原理的概述:-
setItem() 用于向 localStorage 添加键和值。
getItem() 用于从本地存储中检索/获取数据。
removeItem() 用于从 localStorage 中删除一个数据项。
clear() 要清除 localStorage 中的所有数据，请使用 clear()。
key(): 要获取 localStorage 的键，需要传递一个数字。
setItem() 方法的用法
setItem() 方法允许您将值存储在 localStorage 中。它接受两个参数:一个键和一个值。键稍后可用于获取与其关联的值。它应该如下所示:
localStorage.setItem('name', 'Ankit Sharma');
在上面的代码中，键是 name，值是 Ankit Sharma。如前所述，localStorage 只能存储字符串。要在 localStorage 中存储数组或对象，您必须先将它们转换为字符串。
为此，我们将在提供给 setItem() 之前使用 JSON.stringify() 方法，如下所示 -
const userArr = ["Ankit",25]
localStorage.setItem('user', JSON.stringify(userArr));
getItem() 方法的用法
getItem() 方法允许您访问保存在浏览器 localStorage 对象中的数据。此方法接受一个参数，即键，并以字符串形式返回值 -
localStorage.getItem('name');
这将返回一个值为"Ankit Sharma"的字符串。如果在 localStorage 中找不到给定的键，则返回 null。对于数组，我们使用 JSON.parse() 函数，该函数将 JSON 字符串转换为 JavaScript 对象 -
JSON.parse(localStorage.getItem('user'));
使用我们之前构建的数组，以下是如何从本地存储访问它 -
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);
此方法返回数组 ["Ankit", 25]。您可以在网页中查看并在控制台中找到它，如下所示 -
[Log] 来自 localStorage 的名称:- "Ankit Sharma" (example.html，第 22 行) [Log] 来自 localStorage 的用户数组:- ["Ankit", 25] (2) (example.html，第 26 行)
此输出来自 Safari，因此在其他浏览器上看起来会略有不同。让我们将它与未使用 localStorage 存储的另一个数组进行比较 -
const userArr2 = ["Anjali", 27]; console.log(userArr2);
现在控制台上有两个数组，您可以在下面的输出中看到 -
[Log] Name from localStorage: - "Ankit Sharma" (example.html, line 22) [Log] User array from localStorage: - ["Ankit", 25] (2) (example.html, line 26) [Log] ["Anjali", 27] (2) (example.html, line 29)
通常情况下，如果您在代码编辑器中注释掉它们，它们应该会从终端中消失。但通过 localStorage 保存的任何内容都会保留下来。以下是一个例子。
removeItem() 方法的用法
要从 localStorage 中删除某个项目，您可以使用 removeItem() 函数。当为 removeItem() 方法指定键名时，当前键将从存储中删除。如果没有对象与给定的键关联，则此方法不会执行任何操作。以下是代码。
.localStorage.removeItem('name');
clear() 方法的用法
要从 localStorage 中删除所有内容，您可以使用 clear() 函数。使用此方法将清除域存储中的所有记录。它不接受任何参数。请使用以下代码:-
localStorage.clear();
key() 方法的用法
key() 函数用于循环遍历键，同时将数字或索引传递给 localStorage 以获取键的名称。index 选项提供要检索名称的键的从零开始的索引。以下是它的示例:-
localStorage.key(index);
LocalStorage 的优势
使用 localStorage 的优势如下:
LocalStorage 的第一个优势是保存的数据永不过期。
您仍然可以离线访问数据，因为 localStorage 存储的数据即使在没有互联网连接的情况下也可用。
LocalStorage 比 Cookie 更安全，并且可以更好地控制您的数据。
LocalStorage 比 Cookie 提供更大的存储容量。
Cookie 只能存储 4 KB 的数据，而本地存储最多可存储 5 MB 的数据。
LocalStorage 的缺点
以下是 localStorage 的一些缺点 -
LocalStorage 是同步的，这意味着每个操作都是一个接一个地进行的。
这对于较小的数据集影响不大，但随着数据的增长，这可能会成为一个严重的问题。
本地存储比 Cookie 更安全，但不应将其用于存储敏感信息。
任何有权访问用户设备的人都可以查看存储在 localStorage 中的数据。
此外，localStorage 只能保存字符串;如果要存储其他数据类型，必须先将其转换为字符串。
最后，在 localStorage 中存储过多数据可能会导致应用程序运行缓慢。
