数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript 中的本地存储、会话存储和 Cookie 的区别
JavaScript 提供了三种在客户端存储数据的机制 - Cookie、会话存储和本地存储。每种机制都有其优点和缺点。
本地存储是最新的机制。它允许存储大量数据，但数据在浏览器关闭后不会被删除。本地存储适用于存储用户以后需要访问的数据，例如离线数据。
会话存储类似于 Cookie，但数据仅存储在当前会话期间。这意味着当用户关闭浏览器时，数据将被删除。会话存储适用于存储敏感数据，例如登录凭据。
Cookie是最古老且最广为人知的机制。它们易于使用并且得到浏览器的良好支持。但是，它们的数据限制为 4KB，通常用于存储不敏感的数据，例如用户偏好设置。
在本教程中，我们将详细了解每种机制。
本地存储
如今，大多数 Web 应用程序都需要某种类型的用户输入，无论是用户名、送货地址，还是仅仅是偏好设置。然后，此输入通常发送到某个服务器进行处理和存储。但是，如果您的应用程序需要在用户的计算机上本地存储数据怎么办？这就是本地存储的用武之地。
本地存储是一种 Web 存储类型，允许 JavaScript 直接在浏览器中存储和访问数据。这对于存储即使用户关闭浏览器也希望保留的数据（例如偏好设置或设置）特别有用。
本地存储中的数据以键值对的形式存储。键就像数据的名称，值就像实际数据本身。您可以将其视为 JavaScript 中的变量。要将数据存储在本地存储中，首先需要创建一个键。然后，您可以在该键下存储任何所需的数据。
要创建键，请使用setItem()方法。此方法接受两个参数，第一个是键，第二个是要存储的值。
localStorage.setItem('key', 'value');现在您有了键，就可以在该键下存储任何所需的数据。您存储的数据可以是 JavaScript 支持的任何数据类型，包括字符串、数字、对象和数组。
要存储数据，请再次使用setItem()方法。这次，将键作为第一个参数传递，将要存储的数据作为第二个参数传递。
localStorage.setItem('key', 'value');要从本地存储中检索数据，请使用getItem()方法。此方法将键作为参数，并返回存储在该键下的数据。
localStorage.getItem('key');如果要从本地存储中删除项目，请使用removeItem()方法。此方法将键作为参数，并删除存储在该键下的数据。
localStorage.removeItem('key');
会话存储
会话存储 是一种 Web 存储类型，允许 Web 应用程序在用户的浏览器中本地存储数据。与 Cookie 不同，存储在会话存储中的数据特定于创建它的站点，并且数据不会与其他站点共享。
会话存储是 HTML5 中引入的一项新功能，允许您在用户的浏览器中本地存储数据。与 Cookie 不同，存储在会话存储中的数据特定于创建它的站点，并且数据不会与其他站点共享。
会话存储是在应用程序客户端存储数据的一种方式。它类似于本地存储，但有一些关键区别 -
会话存储数据仅对创建它的站点可用。
会话存储数据不会与其他站点共享。
会话存储数据不是永久性的，这意味着它仅在用户在站点上的会话期间可用。
会话存储数据特定于创建它的浏览器选项卡。
会话存储是通过减少客户端和服务器之间需要传输的数据量来提高 Web 应用程序性能的好方法。它还可以用于更安全地存储数据，因为数据不会存储在 Cookie 中，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
Cookie 是使用setItem()方法设置的。此方法接受两个参数，Cookie 的名称和 Cookie 的值。
Cookie 的名称用于识别 Cookie，值是要存储在 Cookie 中的信息。
以下代码设置了一个名为“name”且值为“tutorialsPoint”的 Cookie。
document.cookie = "name=tutorialsPoint";
读取 Cookie
Cookie 是使用getItem()方法读取的。此方法将 Cookie 的名称作为参数，并返回 Cookie 的值。
如果 Cookie 不存在，getItem()方法将返回 null。
以下代码读取“name”Cookie 并将值存储在“user”变量中。
var user = document.cookie.getItem("name");
Cookie 相对于本地存储和会话存储的一个优点是，可以将其设置为在特定时间过期，这使得它们成为存储不应长期保留的数据（例如会话 ID）的良好选择。
本地存储、会话存储和 Cookie 的区别
下表重点介绍了本地存储、会话存储和 Cookie 之间的主要区别 -
本地存储 | 会话存储 | Cookie |
|---|---|---|
| 它允许存储10MB数据。 | 它允许存储5MB数据。 | 存储容量限制为 4KB 数据。 |
| 存储的数据在浏览器关闭后不会被删除。 | 数据仅存储在会话期间，并在浏览器关闭时被删除。 | 数据可以设置为在特定时间过期。 |
| 本地存储适用于存储用户以后需要访问的数据，例如离线数据。 | 会话存储是提高 Web 应用程序性能的好方法。 | Cookie 是存储不应长期保留的数据（例如会话 ID）的良好选择。 |
| 这对于存储即使用户关闭浏览器也希望保留的数据（例如偏好设置或设置）特别有用。 | 会话存储适用于存储敏感数据，例如登录凭据。 | Cookie 通常用于存储不敏感的数据，例如用户偏好设置 |
| 本地存储是HTML5中引入的一项新功能 | 会话存储是HTML5中引入的一项新功能 | Cookie 是最古老的（HTML4）且最广为人知的机制。 |
| 数据不会随客户端到服务器的请求一起发送。 | 数据不会随客户端到服务器的请求一起发送 | 数据会随客户端到服务器的请求一起发送 |
| 数据存储在浏览器和系统上。 | 数据仅存储在浏览器上。 | 数据仅存储在浏览器上。 |
结论
在本教程中，我们讨论了本地存储、会话存储和 Cookie 之间差异。我们已经了解了从这些存储中存储和检索数据的方法。本地存储是最新的机制。它允许存储大量数据（10MB），但数据在浏览器关闭后不会被删除。会话存储类似于 Cookie，但数据仅存储在当前会话期间。这意味着当用户关闭浏览器时，数据将被删除。Cookie是最古老且最广为人知的机制。它们易于使用并且得到浏览器的良好支持。但是，它们的数据限制为 4KB，通常用于存储不敏感的数据，例如用户偏好设置。
41K+ 浏览量
