697

localStorage, sessionStorage, session 和的技术优缺点是什么，cookies我什么时候会使用其中一个？

4

10 回答 10

849

这是一个范围非常广泛的问题，许多优点/缺点将与情况相关。

在所有情况下，这些存储机制将特定于单个计算机/设备上的单个浏览器。跨会话持续存储数据的任何要求都需要涉及您的应用程序服务器端——最有可能使用数据库，但也可能使用 XML 或文本/CSV 文件。

localStorage、sessionStorage 和 cookie 都是客户端存储解决方案。会话数据保存在您直接控制的服务器上。

localStorage 和 sessionStorage

localStorage 和 sessionStorage 是相对较新的 API（也就是说，并非所有旧版浏览器都支持它们）并且几乎相同（在 API 和功能上），唯一的例外是持久性。sessionStorage（顾名思义）仅在浏览器会话期间可用（并且在选项卡或窗口关闭时被删除） - 但是，它确实可以在页面重新加载后继续存在（源DOM 存储指南 - Mozilla 开发者网络）。

显然，如果您存储的数据需要持续可用，那么 localStorage 比 sessionStorage 更可取 - 尽管您应该注意两者都可以由用户清除，因此在任何一种情况下您都不应该依赖数据的持续存在。

localStorage 和 sessionStorage 非常适合在页面之间保存客户端脚本中所需的非敏感数据（例如：偏好、游戏分数）。存储在 localStorage 和 sessionStorage 中的数据可以很容易地从客户端/浏览器中读取或更改，因此不应依赖于在应用程序中存储敏感或与安全相关的数据。

饼干

对于 cookie 也是如此，这些可以被用户轻易篡改，并且数据也可以以纯文本的形式从它们中读取 - 所以如果您想要存储敏感数据，那么会话实际上是您唯一的选择。如果您不使用 SSL，cookie 信息也可能在传输过程中被截获，尤其是在开放的 wifi 上。

从积极的方面来说，cookie 可以通过设置仅 HTTP 标志来防止跨站点脚本 (XSS)/脚本注入等安全风险，这意味着现代（支持）浏览器将阻止从 JavaScript 访问 cookie 和值（这也将阻止您自己的合法 JavaScript 访问它们）。这对于身份验证 cookie 尤其重要，它用于存储包含登录用户详细信息的令牌 - 如果您有该 cookie 的副本，那么就所有意图和目的而言，您将成为该用户，只要 Web 应用程序是关注，并且对用户拥有的数据和功能具有相同的访问权限。

由于 cookie 用于身份验证和用户数据的持久性，因此对于同一域的每个请求，所有对页面有效的 cookie 都会从浏览器发送到服务器- 这包括原始页面请求、任何后续 Ajax 请求、所有图像、样式表、脚本和字体。因此，不应使用 cookie 来存储大量信息。浏览器还可能对可存储在 cookie 中的信息大小施加限制。通常，cookie 用于存储用于身份验证、会话和广告跟踪的标识令牌。令牌本身通常不是人类可读的信息，而是链接到您的应用程序或数据库的加密标识符。

localStorage 与 sessionStorage 与 Cookie

就功能而言，cookie、sessionStorage 和 localStorage 只允许您存储字符串 - 可以在设置时隐式转换原始值（读取后需要将这些值转换回以用作它们的类型），但不能存储对象或数组（可以使用 API 对它们进行 JSON 序列化以存储它们）。会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象。

客户端与服务器端

由于 HTTP 是一种无状态协议 - Web 应用程序在返回网站时无法从以前的访问中识别用户 - 会话数据通常依赖于 cookie 令牌来识别用户以进行重复访问（尽管很少使用 URL 参数相同的目的）。数据通常会有一个滑动到期时间（每次用户访问时都会更新），并且取决于您的服务器/框架，数据将要么存储在进程内（这意味着如果 Web 服务器崩溃或重新启动，数据将丢失）或外部存储在状态服务器或数据库。这在使用网络农场（给定网站的多个服务器）时也是必要的。

由于会话数据完全由您的应用程序（服务器端）控制，因此它是本质上敏感或安全的任何东西的最佳位置。

服务器端数据的明显缺点是可伸缩性 - 在会话期间每个用户都需要服务器资源，并且客户端所需的任何数据都必须随每个请求一起发送。由于服务器无法知道用户是否导航到另一个站点或关闭浏览器，会话数据必须在给定时间后过期，以避免所有服务器资源被废弃的会话占用。因此，在使用会话数据时，您应该注意数据过期和丢失的可能性，尤其是在表单较长的页面上。如果用户删除他们的 cookie 或切换浏览器/设备，它也会丢失。

一些 Web 框架/开发人员使用隐藏的 HTML 输入将数据从表单的一个页面保存到另一个页面，以避免会话过期。

localStorage、sessionStorage 和 cookie 都受“同源”规则的约束，这意味着浏览器应阻止访问数据，但设置信息开始的域除外。

有关客户端存储技术的进一步阅读，请参阅Dive Into Html 5。

于 2013-11-08T22:20:24.277 回答
116

  1. 本地存储

    优点：

    1. Web 存储可以简单地视为对 cookie 的改进，提供更大的存储容量。如果您查看 Mozilla 源代码，我们可以看到5120KB（5MB在 Chrome 上等于250 万个字符）是整个域的默认存储大小。与典型的 4KB cookie 相比，这为您提供了更多的工作空间。
    2. 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据不会被发送回服务器 - 减少了客户端和服务器之间的流量。
    3. 存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该站点的用户使用。

    缺点：

    1. 它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

  2. 饼干

    优点：

    1. 与其他人相比，没有什么AFAIK。

    缺点：

    1. 4K 限制是针对整个 cookie，包括名称、值、到期日期等。要支持大多数浏览器，请将名称保持在 4000 字节以下，并且整体 cookie 大小在 4093 字节以下。
    2. 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据都会被发送回服务器 - 增加了客户端和服务器之间的流量。

    通常，允许执行以下操作：

    • 总共300个饼干
    • 每个 cookie 4096 字节
    • 每个域20 个 cookie
    • 每个域81920 字节（给定 20 个最大大小为 4096 = 81920 字节的 cookie。）

  3. 会话存储

    优点：

    1. 它类似于localStorage。
    2. 数据不是持久的，即数据仅在每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）可用。数据仅在页面会话期间可用。所做的更改已保存并可用于当前页面，以及将来在同一选项卡/窗口上访问该站点时可用。关闭选项卡/窗口后，数据将被删除。

    缺点：

    1. 数据仅在设置它的窗口/选项卡内可用。
    2. 就像localStorage，它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

Checkout cross- tabs - 如何促进跨域浏览器选项卡之间的轻松通信。

于 2017-06-04T20:59:22.450 回答
93

OK，LocalStorage被称为是浏览器的本地存储，最多可以保存10MB，SessionStorage也一样，但是顾名思义，它是基于会话的，在关闭浏览器后会被删除，也可以比 LocalStorage 节省更少，最多5MB，但Cookies是存储在浏览器中的非常小的数据，最多可以节省4KB，可以通过服务器或浏览器访问...

我还创建了下面的图像以一目了然地显示差异：

LocalStorage、SessionStorage 和 Cookie

于 2018-02-17T07:37:26.077 回答
27

这些是 JavaScript 中“窗口”对象的属性，就像 document 是包含 DOM 对象的窗口对象的属性之一一样。

会话存储属性为每个给定的源维护一个单独的存储区域，该区域在页面会话期间可用，即只要浏览器打开，包括页面重新加载和恢复。

本地存储做同样的事情，但即使在浏览器关闭并重新打开时仍然存在。

您可以按如下方式设置和检索存储的数据：

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

var data = sessionStorage.getItem('key');

localStorage 也是如此。

于 2016-01-28T18:55:01.357 回答
26

这是一个快速回顾和简单快速的理解

在此处输入图像描述

来自freecodecamp的讲师Beau Carnes

于 2020-06-01T22:53:33.123 回答
8

本地存储：它保持存储用户信息数据，没有过期日期，当用户关闭浏览器窗口时，这些数据不会被删除，它可以用于日、周、月和年。

在本地存储中可以存储 5-10mb 的离线数据。

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

会话存储：与本地存储日期相同，只是它会在 Web 用户关闭浏览器窗口时删除所有窗口。

在会话存储中最多可以存储 5 mb 数据

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

会话：会话是存储在服务器上的全局变量。每个会话都分配有一个唯一的 ID，用于检索存储的值。

Cookies：Cookies 是数据，以名称-值对的形式存储在您的计算机上的小型文本文件中。设置 cookie 后，随后的所有页面请求都会返回 cookie 名称和值。

于 2018-06-29T20:03:24.663 回答
6

Web Storage API 提供了浏览器可以安全地存储键/值对的机制，比使用 cookie 更直观。Web 存储 APIWindow使用两个新属性扩展该对象-Window.sessionStorage和Window.localStorage. — 调用其中一个将创建 Storage 对象的实例，通过该实例可以设置、检索和删除数据项。每个源（域）使用不同的存储对象sessionStorage。localStorage

存储对象是简单的键值存储，类似于对象，但它们在页面加载时保持不变。

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

键和值始终是字符串。存储任何类型convert it to String，然后存储它。始终建议使用Storage interface方法。

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Web Storage 内部的两种机制如下：

  • sessionStorage为每个给定的同源策略维护一个单独的存储区域，该区域在页面会话期间可用（只要浏览器处于打开状态，包括页面重新加载和恢复）。
  • localStorage做同样的事情，但即使在浏览器关闭并重新打开时仍然存在。

存储«本地存储将数据写入磁盘，而会话存储仅将数据写入内存。当您的应用退出时，任何写入会话存储的数据都会被清除。

可用的最大存储空间因浏览器而异，但大多数浏览器至少实现了 w3c 建议的最大存储限制5MB。

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

始终捕获 LocalStorage 安全和配额超出错误

StorageEvent « 当存储区域发生变化时，会在文档的 Window 对象上触发存储事件。当用户代理要为 Document 发送存储通知时，用户代理必须使用 StorageEvent 将任务排队以在 Document 对象的 Window 对象上触发名为 storage 的事件。

注意：有关真实世界的示例，请参阅Web 存储演示。查看源代码

监听 dom/Window 上的 storage 事件来捕捉 storage 的变化。小提琴。

Cookie（网络 cookie、浏览器 cookie）Cookie 是在您的计算机上以名称-值对的形式存储在小型文本文件中的数据。

使用Document.cookie访问 JavaScript

也可以使用 Document.cookie 属性通过 JavaScript 创建新的 cookie，如果未设置 HttpOnly 标志，则也可以从 JavaScript 访问现有的 cookie。

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

安全和 HttpOnly cookie HTTP 状态管理机制

Cookies 通常在 Web 应用程序中用于识别用户及其经过身份验证的会话

当接收到 HTTP 请求时，服务器可以发送带有响应的Set-Cookie标头。cookie 通常由浏览器存储，然后将 cookie 与在 Cookie HTTP 标头内向同一服务器发出的请求一起发送。

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

当客户端关闭时，会话 cookie将被删除。他们没有指定 Expires 或 Max-Age 指令。

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

永久 cookie在特定日期 (Expires) 或特定时间长度 (Max-Age) 后过期。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Cookie HTTP 请求标头包含服务器先前发送的带有 Set-Cookie 标头的存储的 HTTP cookie。仅 HTTP cookie 无法通过 JavaScript 通过 Document.cookie 属性、XMLHttpRequest 和请求 API 访问，以减轻对跨站点脚本 (XSS) 的攻击。

Cookies主要用于三个目的：

  • 会话管理« 登录、购物车、游戏分数或服务器应记住的任何其他内容
  • 个性化« 用户偏好、主题和其他设置
  • 跟踪（记录和分析用户行为） « Cookie 具有与之关联的域。如果此域与您所在页面的域相同，则称 cookie 为第一方 cookie。如果域不同，则称为第三方 cookie。虽然第一方 cookie 仅发送到设置它们的服务器，但网页可能包含存储在其他域的服务器上的图像或其他组件（如广告横幅）。通过这些第三方组件发送的 Cookie 称为第三方 Cookie，主要用于网络上的广告和跟踪。

发明 Cookie 是为了解决“如何记住用户信息”的问题：

  • 当用户访问网页时，他的姓名可以存储在 cookie 中。
  • 下次用户访问该页面时，属于该页面的 cookie 会添加到请求中。通过这种方式，服务器获取必要的数据来“记住”有关用户的信息。

GitHubGist示例

作为总结，

  • localStorage 在不同的选项卡或窗口上持续存在，即使我们关闭浏览器，也会根据域安全策略和用户对配额限制的选择进行相应的处理。
  • 如果我们关闭选项卡（顶级浏览上下文），sessionStorage 对象不会持续存在，因为如果我们通过另一个选项卡或窗口浏览，它就不存在。
  • Web Storage（会话，本地）允许我们保存大量的键/值对和大量的文本，这是通过 cookie 无法做到的。
  • 用于敏感操作的 Cookie 的生命周期应该很短。
  • Cookies 主要用于网络上的广告和跟踪。例如，请参阅Google 使用的 cookie 类型。
  • 每次请求都会发送 Cookie，因此它们会降低性能（尤其是对于移动数据连接）。用于客户端存储的现代 API 是 Web 存储 API（localStorage 和 sessionStorage）和 IndexedDB。
于 2018-03-16T14:27:19.007 回答
4

本地存储：

  • Web 存储可以简单地视为对 cookie 的改进，提供更大的存储容量。可用大小为 5MB，与典型的 4KB cookie 相比，可使用的空间要大得多。

  • 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据不会被发送回服务器 - 减少了客户端和服务器之间的流量。

  • 存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该站点的用户使用。

  • 它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

饼干：

  • 我们可以为每个cookie设置过期时间

  • 4K 限制是针对整个 cookie，包括名称、值、到期日期等。要支持大多数浏览器，请将名称保持在 4000 字节以下，并且整体 cookie 大小在 4093 字节以下。

  • 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据都会被发送回服务器 - 增加了客户端和服务器之间的流量。

会话存储：

  • 它类似于本地存储。

  • 更改仅适用于每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）。所做的更改已保存并可用于当前页面，以及将来在同一窗口中访问该站点时可用。关闭窗口后，将删除存储数据仅在设置它的窗口/选项卡内可用。

  • 数据不是持久的，即一旦关闭窗口/选项卡就会丢失。与 localStorage 一样，它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

于 2019-03-04T06:28:26.063 回答
1

本地存储

  1. 使用 localStorage 存储的数据没有过期日期，只能通过 JavaScript 或清除浏览器缓存/本地存储的数据来清除。
  2. 存储限制是三者中的最大值。
  3. 存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该站点的用户使用。
  4. 它适用于同源策略。因此，存储的数据将仅在同一来源上可用。

会话存储

  1. 它仅为会话存储数据，这意味着数据会一直存储到浏览器（或选项卡）关闭为止。
  2. 数据永远不会传输到服务器。
  3. 更改仅适用于每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）。所做的更改已保存并可用于当前页面，以及将来在同一窗口中访问该站点时可用。窗口关闭后，存储将被删除。
于 2021-12-12T17:50:23.137 回答
1

确切的用例 -

  • 如果您希望您的页面始终保存一些非机密数据，那么您可以使用localStorage.
  • 如果服务器需要知道一些信息，比如认证密钥，你应该使用它cookies来存储它们。
  • sessionStorage可用于存储界面的状态，即，每当您访问一个页面、对其进行自定义、访问另一个页面并返回同一页面时，您都希望向该页面显示用户如何对其进行自定义。这是一个很好的用例sessionStorage。

在此处输入图像描述

于 2022-01-25T09:14:08.307 回答