本地存储与 Cookie

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

想要改进这个问题？更新问题，以便可以通过编辑这篇文章用事实和引文来回答它。

10 个月前已关闭。

Answer 1

Cookie 和本地存储有不同的用途。 Cookie主要用于服务器端读取，本地存储只能由客户端读取。所以问题是，在您的应用程序中，谁需要这些数据——客户端还是服务器？

如果它是你的客户端（你的 JavaScript），那么一定要切换。发送每个 HTTP 标头中的所有数据会浪费带宽。

如果是您的服务器，则本地存储就没那么有用，因为您必须以某种方式转发数据（使用 Ajax 或隐藏表单字段或其他方式）。如果服务器只需要每个请求的总数据的一小部分，这可能没问题。

无论哪种方式，您都希望将会话 cookie 作为 cookie 保留。

根据技术差异以及我的理解：

1. 除了是旧方式之外在保存数据时，Cookie 给您的限制是 4096 字节（实际上是 4095）——这是针对每个 cookie 的。本地存储大小为每个域 10MB - 此堆栈溢出问题也提到了。

2. localStorage 是Storage 接口的实现。它存储的数据没有过期日期，并且仅通过 JavaScript 清除，或清除浏览器缓存/本地存储的数据 - 与 cookie 过期不同。

Answer 2

在 JWT 的背景下，Stormpath 写了一篇相当有用的文章，概述了存储它们的可能方法，以及与每种方法相关的（缺点）优点。

它还简要概述了 XSS 和 CSRF 攻击以及如何应对它们。

我附上了下面文章的一些简短片段，以防他们的文章离线/网站瘫痪。

本地存储

问题：

Web 存储（localStorage/sessionStorage）可通过同一域上的 JavaScript 进行访问。这意味着您网站上运行的任何 JavaScript 都可以访问 Web 存储，因此可能容易受到跨站点脚本 (XSS) 攻击。简而言之，XSS 是一种漏洞，攻击者可以注入将在您的页面上运行的 JavaScript。基本的 XSS 攻击尝试通过表单输入注入 JavaScript，攻击者在其中放置警报（'You are Hacked'）;进入表单以查看它是否由浏览器运行并且可以被其他用户查看。

预防：

为了防止 XSS，常见的应对措施是对所有不受信任的数据进行转义和编码。但这还远不是故事的全部。 2015 年，现代 Web 应用程序使用 CDN 或外部基础设施上托管的 JavaScript。现代网络应用程序包括用于 A/B 测试、渠道/市场分析和广告的第三方 JavaScript 库。我们使用像 Bower 这样的包管理器将其他人的代码导入到我们的应用程序中。

如果您使用的只有一个脚本受到损害怎么办？恶意的
JavaScript可以嵌入到页面中，Web Storage是
妥协了。这些类型的 XSS 攻击可以获取每个人的 Web 存储
在他们不知情的情况下访问您的网站。这可能就是为什么
许多组织建议不要存储任何有价值或信任的东西
网络存储中的任何信息。这包括会话标识符和
代币。

作为一种存储机制，Web Storage 不强制执行任何安全措施
传输过程中的标准。任何阅读并使用 Web Storage 的人都必须
尽职调查以确保他们始终通过 HTTPS 发送 JWT
并且从不使用 HTTP。

Cookie

问题：

当 Cookie 与 HttpOnly cookie 标志一起使用时，无法通过 JavaScript 访问，并且不受 XSS 影响。您还可以设置安全 cookie 标志以保证 cookie 仅通过 HTTPS 发送。这是过去利用 cookie 来存储令牌或会话数据的主要原因之一。现代开发人员对于使用 cookie 犹豫不决，因为他们传统上需要将状态存储在服务器上，从而破坏了 RESTful 最佳实践。如果您在 Cookie 中存储 JWT，则 Cookie 作为一种存储机制不需要将状态存储在服务器上。这是因为 JWT 封装了服务器服务请求所需的所有内容。

但是，cookie 容易受到不同类型的攻击：
跨站点请求伪造 (CSRF)。 CSRF 攻击是一种攻击
当恶意网站、电子邮件或博客导致用户
Web 浏览器在受信任的站点上执行不需要的操作
用户当前已通过身份验证。这是对如何利用
浏览器处理cookies。 cookie 只能发送到以下域
这是允许的。默认情况下，这是最初的域
设置cookie。无论请求如何，都会发送 cookie
无论您是在 galaxies.com 还是 haha​​gonnahackyou.com。

预防：

现代浏览器支持SameSite标志，以及HttpOnly 和Secure。该标志的目的是防止跨站请求中传输cookie，防止多种CSRF攻击。

对于不支持 SameSite 的浏览器，可以通过使用同步令牌模式来防止 CSRF。这
听起来很复杂，但是所有现代 Web 框架都支持
这个。

例如，AngularJS 有一个解决方案来验证 cookie 是否为
仅可由您的域访问。直接来自 AngularJS 文档：

当执行 XHR 请求时，$http 服务从
cookie（默认情况下为 XSRF-TOKEN）并将其设置为 HTTP 标头
（X-XSRF-令牌）。因为只有在您的域上运行的 JavaScript 才能
读取cookie，您的服务器可以确信XHR来自
JavaScript 在您的域上运行。你可以做这个CSRF保护
通过包含 xsrfToken JWT 声明实现无状态：

<前><代码>{
"iss": "http://galaxies.com",
“经验”：1300819380，
"scopes": ["explorer", "solar-harvester", "seller"],
"sub": "[电子邮件受保护]",
“xsrfToken”：“d9b9714c-7ac0-42e0-8696-2dae95dbc33e”
}

利用 Web 应用程序框架的 CSRF 保护使 Cookie 发挥作用
用于存储 JWT 的实体。 CSRF 也可以通过以下方式部分预防：
检查 API 中的 HTTP Referer 和 Origin 标头。 CSRF
攻击将具有与以下内容无关的 Referer 和 Origin 标头
您的应用程序。

完整的文章可以在这里找到：
https://stormpath.com/ blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

他们还有一篇有用的文章，介绍如何最好地设计和实现 JWT，以及令牌本身的结构:
https://stormpath.com/blog/jwt-the-right-way/

Answer 3

通过 localStorage，Web 应用程序可以在用户浏览器中本地存储数据。在 HTML5 之前，应用程序数据必须存储在 cookie 中，并包含在每个服务器请求中。可以在本地存储大量数据，而不影响网站性能。尽管 localStorage 更现代，但这两种技术都有一些优点和缺点。

Cookie 的

优点

• 传统支持（永远存在）
• 持久数据
• 过期日期
• Cookie 可以标记为 HTTPOnly，这可能会在用户会话期间限制对用户浏览器的 XSS 攻击（不能保证完全免受 XSS 攻击）。

每个

• 域将其所有 cookie 存储在一个字符串中，这可以使
  解析数据很困难
• 数据未加密，这成为一个问题，因为......虽然
  尺寸小，cookie 随每个 HTTP 请求一起发送 大小有限
  (4KB)

本地存储

优点

• 大多数现代浏览器都支持
• 直接存储在浏览器中的持久数据 同源
• 规则适用于本地存储数据
• 不是随每个 HTTP 请求一起发送
• 每个域约 5MB 存储空间（即 5120KB）

缺点

• 不受任何支持之前：IE 8、Firefox 3.5、Safari 4、Chrome 4、Opera 10.5、iOS 2.0、Android 2.0
• 如果服务器需要存储您特意拥有的客户端信息
  发送它。

localStorage 的用法与会话几乎相同。它们有非常精确的方法，因此从会话切换到 localStorage 确实是小菜一碟。但是，如果存储的数据对于您的应用程序确实至关重要，您可能会使用 cookie 作为备份，以防 localStorage 不可用。如果您想检查浏览器对 localStorage 的支持，您所要做的就是运行这个简单的脚本：

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

“安全 (SSL) 页面上的 localStorage 值是隔离的”
正如有人注意到的那样，请记住 localStorage 不会
如果您从“http”切换到“https”安全协议，则可用，其中
cookie 仍然可以访问。这对于
请注意您是否使用安全协议。

Answer 4

Cookie：

1. 在 HTML5 之前引入。
2. 有有效期。
3. 通过 JS 或通过浏览器清除浏览数据或过期后清除。
4. 将根据每个请求发送到服务器。
5. 容量为4KB。
6. 只有字符串才能存储在 cookie 中。
7. 有两种类型的 cookie：持久性 cookie 和会话 cookie。

本地存储：

1. 随 HTML5 引入。
2. 没有有效期。
3. 通过JS或者浏览器的清除浏览数据来清除。
4. 您可以选择何时必须将数据发送到服务器。
5. 容量为5MB。
6. 数据无限期存储，并且必须是字符串。
7. 只有一种类型。

Answer 5

主要区别：

容量：

• 本地存储： 10MB
• Cookie： 4kb

浏览器支持：

• 本地存储：< /strong> HTML5
• Cookie： HTML4、HTML5

存储位置：

• 本地存储： 仅浏览器
• Cookie： 浏览器和浏览器服务器

随请求发送：

• 本地存储： 否
• Cookie： 是

访问来源：

• 本地存储：< /strong> 任何窗口
• Cookie： 任何窗口。

到期日期：

• 本地存储：永不过期，直到由 JavaScript 完成。
• Cookies：是的，有有效期。

注意：用那个，适合你的。

Answer 6

另外值得一提的是，当用户在某些版本的移动 Safari 中以“私密”模式浏览时，无法使用 localStorage。

引用自 WayBack Archive of 2018 年关于 Window.localStorage 的 MDN 主题：

注意：从 iOS 5.1 开始，Safari Mobile 将 localStorage 数据存储在缓存文件夹中，该文件夹通常会根据操作系统的要求偶尔进行清理如果空间有限。 Safari Mobile 的隐私浏览模式还可以完全阻止写入 localStorage。

Answer 7

Cookie：

• 可以通过JavaScript访问，因此Cookie的数据可以通过XSS窃取
  攻击（跨站脚本攻击），但设置 HttpOnly 标志
  Cookie 阻止 JavaScript 的访问，因此 Cookie 的数据
  免受XSS 攻击。

• 容易受到CSRF（跨站请求伪造）的攻击，但设置
  将 SameSite 标志 Lax 设置为 Cookie 可缓解 CSRF 并将 SameSite 标志设置 Strict 设置为 Cookie 防止
  CSRF。

• 必须有到期日期，因此当到期日期过去时，Cookie
  自动删除，因此即使您忘记删除 Cookie，
  Cookie 由于过期而被自动删除。

• 一般大小约为4KB（取决于浏览器）。

本地存储：

• 可通过JavaScript访问，因此本地存储的数据可能被XSS窃取
  攻击（跨站脚本攻击） 然后，正如我研究的那样，
  没有简单的方法可以预防本地存储遭受XSS攻击
  攻击。

• 不容易受到CSRF（跨站请求伪造）的攻击。<​​/p>

• 没有过期日期，因此如果您忘记删除本地存储
  数据，本地存储数据可以永久保留。

• 一般大小约为5MB（取决于浏览器）。

我建议对敏感数据使用Cookie，对非敏感数据使用本地存储。

Answer 8

本地存储最多可存储 5MB 离线数据，而会话也最多可存储 5MB 数据。但cookie只能存储4kb的文本格式数据。

LOCAL和Session以JSON格式存储数据，因此易于解析。但cookies数据是字符串格式的。

图片参考：https:// tutorial.techaltum.com/local-and-session-storage.html

Answer 9

那么，本地存储速度很大程度上取决于客户端使用的浏览器以及操作系统。 Mac 上的 Chrome 或 Safari 可能比 PC 上的 Firefox 快得多，尤其是使用更新的 API 时。一如既往，测试是你的朋友（我找不到任何基准）。

我真的没有看到 cookie 与本地存储之间有很大的区别。此外，您应该更担心兼容性问题：并非所有浏览器都开始支持新的 HTML5 API，因此 cookie 将是速度和兼容性的最佳选择。