饼干：

在HTML5之前介绍。 有有效期。 通过JS或浏览器的“清除浏览数据”或过期日期清除。 将每个请求发送到服务器。 容量为4KB。 只有字符串可以存储在cookie中。 有两种类型的cookie:持久cookie和会话cookie。

本地存储:

由HTML5引入。 没有过期日期。 由JS或浏览器的“清除浏览数据”清除。 您可以选择何时必须将数据发送到服务器。 容量为5MB。 数据是无限存储的，必须是字符串。 只有一种。

饼干：

在HTML5之前介绍。 有有效期。 通过JS或浏览器的“清除浏览数据”或过期日期清除。 将每个请求发送到服务器。 容量为4KB。 只有字符串可以存储在cookie中。 有两种类型的cookie:持久cookie和会话cookie。

本地存储:

由HTML5引入。 没有过期日期。 由JS或浏览器的“清除浏览数据”清除。 您可以选择何时必须将数据发送到服务器。 容量为5MB。 数据是无限存储的，必须是字符串。 只有一种。

在jwt上下文中，Stormpath写了一篇相当有用的文章，概述了存储jwt的可能方法，以及每种方法的优缺点。

它还简要介绍了XSS和CSRF攻击，以及如何对抗它们。

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

本地存储

问题:

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

预防:

为了防止XSS，常见的响应是转义和编码所有不可信的数据。但这远不是故事的全部。2015年，现代web应用程序使用托管在cdn或外部基础设施上的JavaScript。现代网络应用包括用于A/B测试、漏斗/市场分析和广告的第三方JavaScript库。我们使用包管理器(如Bower)将其他人的代码导入到我们的应用中。 如果您使用的脚本中只有一个被破坏了怎么办?恶意的 JavaScript可以嵌入到页面中，Web Storage也可以 妥协。这些类型的XSS攻击可以获取每个人的Web存储 在他们不知情的情况下访问你的网站。这可能就是为什么a 很多组织都建议不要存储任何有价值或值得信任的东西 网络存储中的任何信息。这包括会话标识符和 令牌。 作为一种存储机制，Web storage并不强制执行任何安全性 转移过程中的标准。任何阅读和使用Web存储的人都必须这样做 尽职调查以确保他们总是通过HTTPS发送JWT 从不使用HTTP。

饼干

问题:

当与HttpOnly cookie标志一起使用时，cookie不能通过JavaScript访问，并且不受XSS影响。您还可以设置安全cookie标志，以确保cookie仅通过HTTPS发送。这是过去利用cookie来存储令牌或会话数据的主要原因之一。现代开发人员对使用cookie犹豫不决，因为它们传统上要求将状态存储在服务器上，从而破坏了RESTful的最佳实践。如果您在cookie中存储JWT，那么cookie作为一种存储机制不需要将状态存储在服务器上。这是因为JWT封装了服务器为请求服务所需的一切。 然而，cookie容易受到另一种类型的攻击: 跨站请求伪造(CSRF)。CSRF攻击是一种攻击 当恶意网站，电子邮件或博客导致用户的 Web浏览器在受信任的站点上执行不希望的操作 用户当前认证成功。这是如何利用 浏览器处理cookie。cookie只能被发送到域 这是允许的。默认情况下，这是最初的域 设置cookie。cookie将被发送给请求，不管 不管你是在galaxies.com还是hahagonnahackyou.com。

预防:

除了HttpOnly和Secure之外，现代浏览器还支持SameSite标志。该标志的作用是防止cookie在跨站请求中传输，防止多种CSRF攻击。 对于不支持SameSite的浏览器，可以通过使用同步令牌模式来防止CSRF。这 听起来很复杂，但是所有的现代web框架都支持 这一点。 例如，AngularJS有一个解决方案来验证cookie是否正确 只能通过您的域访问。直接来自AngularJS文档: 当执行XHR请求时，$http服务从 cookie(默认为XSRF-TOKEN)，并将其设置为HTTP报头 (X-XSRF-TOKEN)。因为只有在你的域中运行的JavaScript可以 读取cookie，您的服务器可以确保XHR来自 JavaScript在您的域上运行。你可以让这个CSRF保护 通过包含xsrfToken JWT声明无状态: ｛ “国际空间站”:“http://galaxies.com”, “实验”:1300819380, “scope”:[“explorer”，“solar harvester”，“seller”]， “子”:“tom@andromeda.com”, :“xsrfToken d9b9714c - 7 - ac0 42 - e0 - 8696 - 2 dae95dbc33e” ｝ 利用您的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/

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

如果它是你的客户端(JavaScript)，那么无论如何都要切换。在每个HTTP报头中发送所有数据是在浪费带宽。

如果它是您的服务器，本地存储就不是那么有用了，因为您必须以某种方式(使用Ajax或隐藏表单字段或其他东西)转发数据。如果服务器对每个请求只需要总数据的一小部分，那么这样做是可以的。

不管怎样，您都希望将会话cookie保留为cookie。

根据技术上的差异，以及我的理解:

除了作为一种古老的保存数据的方式，cookie给你一个4096字节的限制(实际上是4095字节)-这是每个cookie。本地存储每个域高达10MB -这个堆栈溢出问题也提到了它。 localStorage是存储接口的实现。它存储的数据没有过期日期，只通过JavaScript或清除浏览器缓存/本地存储的数据-不像cookie过期。

值得一提的是，当用户在某些版本的移动Safari中以“私有”模式浏览时，localStorage不能被使用。

引自视窗MDN专题的WayBack档案。2018年的localStorage:

注意:从iOS 5.1开始，Safari Mobile将localStorage数据存储在缓存文件夹中，在操作系统的要求下，通常在空间不足的情况下，会偶尔清理缓存文件夹。Safari Mobile的私密浏览模式也完全阻止了对localStorage的写入。

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

LOCAl和Session存储数据为JSON格式，因此易于解析。但是cookie数据是字符串格式。