重访HTML5本地存储

本地存储是部分HTML5 Web存储API ，它允许您将数据存储在浏览器中。 不像饼干，使用本地存储，存储的数据不会被发送回服务器。 在客户端上的所有数据住宿，并且可以存储目前从2MB到10MB。 此限制是联系在一起的特定的浏览器，协议（HTTP或HTTPS），端口和顶层中使用的域。

在这篇文章中，我们将讨论如何使用这个API来提高网站的性能。 我假设你知道什么是本地存储和方法暴露出来，但如果你需要复习我建议你阅读文章Web存储API的概述科林Ihrig。

可用磁盘空间

在我们开始之前的本地存储的讨论中，我想给你的可用磁盘空间的概述主要的移动和桌面浏览器。 下表是基于文章“用在移动浏览器配额工作” 。

移动浏览器：

桌面浏览器：

本地缓存VS本地存储

当使用本地存储，你的数据会留在客户端上，并在会话和设备重新启动依然存在。 正如我在介绍中提到的，本地存储API的限制是依赖于特定的浏览器（如前面的表中），协议，端口，并且在使用中***域名。 相比之下，在浏览器的原生高速缓存的可用空间跨网站共享，这是在移动设备上要小得多。 它被频频刷新，有时甚至同一个访问中。 移动设备有一个额外的问题：他们比桌面设备不那么强大，因此获得优异性能是必须的。

已经有很多关于本地存储性能的讨论。 例如，基督教海尔曼，以前与Mozilla的，写了“有本地存储没有简单的解决方案” 。 本地存储可以有一个性能命中如果不小心使用。 你需要考虑的第一件事是，它是一个同步API，因此块的主UI线程。 本地存储器写入和读取从硬盘驱动器，其可以是比从存储器读取一个更昂贵的操作的数据。 为了给您访问的数据，本地存储需要从磁盘读取数据，并在性能损失发生时的。 这种性能是无法与少量数据的一个主要问题，但它可以明显的使用完整的存储限制。

作为一个很好的做法，你应该尝试执行尽可能少的读取越好。 此外，因为我们面对的是一个同步API，你应该尝试读取本地存储的数据后，才window.onload事件已触发，以避免阻塞UI线程。

事情变了

但事情好起来。 通过发表文章， 彼得·穆尔 Mobify解释说， 本地存储可以比移动设备上的本地高速缓存快5倍是 。

在同一篇文章的附录 ，你可以看到本地存储在移动浏览器和多少它提高了性能的演变。 你也可以看到，本地存储一直比本地高速缓存快。

谁在使用本地存储？

最近有一些使用本地存储高速缓存的资产，如网站的情况下， 监护人谁正在使用本地存储的关键路径CSS。 您可以查看此演示文稿以速度2014年会议给予更多地了解它们是如何能够做到这一点。

也碎杂志最近开始在本地存储缓存Web字体。 在这篇文章中关于最近在其网站上实施的，他们的报告推迟网页字体，并在变化导致的最有效的改进中本地存储缓存他们一些性能改进。

秘密浏览的注意事项

由于在报道caniuse.com ，标签下的已知问题，在私人或隐身模式下运行时，Safari浏览器，Safari浏览器的iOS和Android的浏览器不支持设置在本地存储中的项目。

其他浏览器如Chrome和Firefox允许您将数据存储在属于私人模式的本地存储，但是当你退出私人模式的数据被清除。 这是由于隐私问题，因为有人可能会使用的持久性数据，了解用户的行为，当私人模式。

如果以前的会话下设定一个预期值，在随后的访问是有这个问题可能会破坏您的应用程序的行为。 因此，为了安全地使用本地存储，这是一个很好的做法，不仅要测试的支持，同时也用于测试的能力来获取和设置项目。

有关在私密模式，并就如何检查在不同浏览器本地存储内容的本地存储行为的详细信息，您可以使用文章“不要忘记检查隐私浏览模式时测试”作为参考。

结论

也许它的时候，我们开始重新审视本地存储和其潜在的使用，尤其是在这里我们可以用它来避免延迟瓶颈的移动设备。 我们可以开始用新方式来缓存我们的资产，然后立即为他们服务于我们的用户的思维。 我们已经看到，已经有非传统的方式本地存储使用的一些成功实施。

From: https://www.sitepoint.com//html5-local-storage-revisited/