饼干：

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

本地存储：

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

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

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

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

引用自MDN（https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage）：

注意：从iOS 5.1开始，Safari Mobile会根据操作系统的要求（通常在空间不足的情况下）将localStorage数据存储在缓存文件夹中，该文件夹有时会被清理。Safari Mobile的“私有浏览”模式还阻止了完全写入localStorage。

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

我真的没有看到Cookie与本地存储的巨大差异。另外，您应该更加担心兼容性问题：并不是所有的浏览器都已经开始支持新的HTML5 API，因此cookie是提高速度和兼容性的最佳选择。

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

如果它是您的客户端（您的JavaScript），则一定要切换。通过在每个HTTP标头中发送所有数据来浪费带宽。

如果是您的服务器，则本地存储不是那么有用，因为您必须沿某种方式转发数据（使用Ajax或隐藏的表单字段等）。如果服务器仅需要每个请求的全部数据的一小部分，则可以这样做。

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

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

1. 除了作为一种古老的数据保存方式之外，Cookie还为您提供了4096个字节的限制（实际上为4095 个字节），它是每个cookie的限制。本地存储是一样大的每个域5MB - SO问题也提到了它。

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