本地存储与Cookie

饼干：

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到期不同。