JavaScript 中本地存储、会话存储和 Cookie 之间的区别

JavaScript 提供了三种在客户端存储数据的机制 - cookie、会话存储和本地存储。每种机制都有优点和缺点。

本地存储是最新的机制。它允许存储大量数据，但关闭浏览器时数据不会被删除。本地存储对于存储用户稍后需要访问的数据很有用，例如离线数据。

会话存储与cookie类似，但数据仅存储用于当前会话。这意味着当用户关闭浏览器时数据将被删除。会话存储对于存储敏感数据（例如登录凭据）非常有用。

Cookie 是最古老且最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。

在本教程中，我们将详细介绍它们中的每一个。< /p>

本地存储

现在大多数网络应用程序都需要某种类型的用户输入，无论是用户名、送货地址，甚至只是首选项设置。然后，该输入通常会发送到某处的服务器进行处理和存储。但是，如果您的应用程序需要将数据本地存储在用户计算机上怎么办？这就是本地存储的用武之地。

本地存储是一种 Web 存储，允许 JavaScript 直接在浏览器中存储和访问数据。这对于存储即使用户关闭浏览器也希望保留的数据特别有用，例如首选项或设置。

本地存储中的数据存储在键/值对中。键就像数据的名称，值就像实际数据本身。您可以将其视为 JavaScript 中的变量。要将数据存储在本地存储中，首先需要创建一个密钥。然后，您可以在该键下存储所需的任何数据。

要创建键，请使用 setItem() 方法。该方法有两个参数，第一个是键，第二个是要存储的值。

localStorage.setItem('key', 'value');

现在您有了密钥，您可以在该密钥下存储您想要的任何数据。您存储的数据可以是 JavaScript 支持的任何数据类型，包括字符串、数字、对象和数组。

要存储数据，请再次使用 setItem() 方法。这次，您传入密钥作为第一个参数，传入要存储的数据作为第二个参数。

localStorage.setItem('key', 'value');

要从本地存储检索数据，请使用 getItem() 方法。此方法将键作为参数并返回存储在该键下的数据。

localStorage.getItem('key');

如果您想从本地存储中删除项目，请使用removeItem()方法。此方法将密钥作为参数并删除存储在该密钥下的数据。

localStorage.removeItem('key');

会话存储

会话存储是一种网络存储，允许网络应用程序在用户浏览器中本地存储数据。与 Cookie 不同，会话存储中存储的数据特定于创建该数据的站点，并且不会与其他站点共享数据。

会话存储是 HTML5 中引入的一项新功能允许您将数据本地存储在用户的浏览器中。与 Cookie 不同，会话存储中存储的数据特定于创建该数据的站点，并且不会与其他站点共享数据。

会话存储是一种在应用程序客户端存储数据的方式。它类似于 本地存储，但有一些关键区别 -

• 会话存储数据仅可供创建它的站点使用。

< li>

会话存储数据不与其他站点共享。

• 会话存储数据不是持久性的，这意味着它仅在用户会话期间可用。

• 会话存储数据特定于创建它的浏览器选项卡。

会话存储是一个通过减少客户端和服务器之间需要传输的数据量来提高 Web 应用程序性能的好方法。它还可以用于以更安全的方式存储数据，因为数据不会存储在可供第三方网站访问的 Cookie 中。

要在 Web 应用程序中使用会话存储，您需要您需要使用sessionStorage对象。该对象提供对当前会话存储的访问。

sessionStorage 对象有两个方法

setItem() - 该方法设置一个键/值对会话存储。

sessionStorage.setItem("name", "tutorialsPoint");

getItem() - 此方法从会话存储中检索键的值。

var name = sessionStorage.getItem("name");

sessionStorage 对象还有一些其他属性 -

• length - 此属性返回键/值的数量会话存储中的对。

• key() - 此方法接受索引作为参数，并返回会话存储中该索引处的密钥

会话存储是提高 Web 应用程序性能并以更安全的方式存储数据的好方法。

Cookie

Cookie 是存储在用户计算机上的一小段数据。 Cookie 用于存储有关用户的信息，例如用户的姓名、密码和偏好设置。

Cookie 是使用 document.cookie 属性创建的。此属性用于设置、获取和删除 Cookie。

设置 Cookie

使用 setItem() 方法设置 Cookie。该方法接受两个参数，cookie的名称和cookie的值。

cookie的名称用于标识cookie，值是要存储在cookie中的信息。 cookie。

以下代码设置一个名为“name”和值“tutorialsPoint”的 cookie。

document.cookie = "name=tutorialsPoint";

读取 Cookie

使用 getItem() 方法读取 Cookie。此方法接受 cookie 的名称作为参数并返回 cookie 的值。

如果 cookie 不存在，getItem() 方法将返回 null。< /p>

以下代码读取“name”cookie 并将值存储在“user”变量中。

var user = document.cookie.getItem("name");

与本地存储和会话存储相比，cookie 的一个优点是它们可以设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的不错选择。

本地存储、会话存储和 Cookie 之间的区别

下表突出显示了本地存储、会话存储和 Cookie 之间的主要区别 -

结论

在本教程中，我们讨论了本地存储、会话存储之间的区别和饼干。我们已经看到了从该存储中存储和检索数据的不同方法。 本地存储是最新的机制。它允许存储更大量（10MB）的数据，但关闭浏览器时数据不会被删除。 会话存储与cookie类似，但仅存储当前会话的数据。这意味着当用户关闭浏览器时数据将被删除。 Cookie 是最古老、最著名的机制。它们使用简单并且受到浏览器的良好支持。但是，它们仅限于 4KB 的数据，并且通常用于存储不敏感的数据，例如用户首选项。