skysat重访周期_重访HTML5本地存储

skysat重访周期

本地存储是HTML5 Web存储API的一部分 ，它允许您在浏览器中存储数据。 与cookie不同，使用本地存储存储的数据不会发送回服务器。 所有数据均保留在客户端上，您当前可以存储2MB至10MB。 此限制与使用的特定浏览器，协议（HTTP或HTTPS），端口和顶级域相关。

在本文中，我们将讨论如何使用此API来改善网站的性能。 我假设您知道什么是本地存储以及公开的方法，但是如果需要复习，建议您阅读Colin Ihrig的文章Web存储API概述 。

可用磁盘空间

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

移动浏览器：

浏览器	Chrome	Android浏览器	火狐浏览器	iOS Safari
版	40	4.3	34	6-8
可用空间	10MB	2MB	10MB	5MB

桌面浏览器：

浏览器	Chrome	歌剧	火狐浏览器	苹果浏览器	IE浏览器
版	40	27	34	6-8	9-11
可用空间	10MB	10MB	10MB	5MB	10MB

本机缓存与本地存储

使用本地存储时，您的数据将保留在客户端上，并在会话和设备重启后保持不变。 正如我在简介中所提到的，本地存储API的限制与所使用的特定浏览器（如上表所示），协议，端口和顶级域有关。 相比之下，浏览器的本机缓存上的可用空间在各个网站之间共享，而在移动设备上则要小得多。 它经常被刷新，有时甚至在同一次访问中也会被刷新。 移动设备还有一个问题：它们不如台式机强大，因此必须具有良好的性能。

有关本地存储性能的讨论很多。 例如，以前在Mozilla 任职的 Christian Heilmann写道： “本地存储没有简单的解决方案” 。 如果使用不当，本地存储可能会降低性能。 您需要考虑的第一件事是它是一个同步API，因此它会阻塞主UI线程。 本地存储从硬盘驱动器写入和读取数据，这比从内存中读取数据要昂贵得多。 为了使您能够访问数据，本地存储需要从磁盘读取数据，这就是发生性能下降的地方。 对于少量数据来说，性能下降不是主要问题，但是使用完整存储限制可以明显看出这一点。

作为一种好习惯，您应该尝试执行尽可能少的读取。 另外，由于我们正在处理同步API，因此您应该仅在window.onload事件触发后才尝试从本地存储中读取数据，以避免阻塞UI线程。

事情变了

但是情况正在好转。 Mobify的Peter McLachlan发表的一篇文章解释说， 本地存储的速度可以比移动设备上的本地缓存快5倍 。

在同一篇文章的附录中，您可以看到移动浏览器上本地存储性能的演变以及它的改进程度。 您还可以看到本地存储始终比本地缓存快。

谁在使用本地存储？

最近有一些网站使用本地存储来缓存资产的案例，例如The Guardian正在将本地存储用于关键路径CSS。 您可以查看2014年Velocity会议上的演示文稿 ，以了解有关他们如何做到这一点的更多信息。

另外，《 Smashing Magazine》最近也开始在本地存储中缓存Web字体。 在有关最近在其网站上实施的一些性能改进的这篇文章中 ，他们报告了推迟Web字体并将它们缓存在本地存储中，这些更改导致了最有效的改进。

关于私人浏览的注释

如caniuse.com上报告的 ，在“已知问题”选项卡下，当以私有或隐身模式运行时，Safari，iOS Safari和Android浏览器不支持在本地存储中设置项目。

其他浏览器（例如Chrome和Firefox）允许您在私有模式下将数据存储在本地存储中，但是在退出私有模式时会清除数据。 这是由于隐私问题造成的，因为在私有模式下，有人可能会使用持久性数据来了解用户的操作。

如果预期在上一次会话下设置的值在以后的访问中存在，则此问题可能会破坏您的应用程序的行为。 因此，为了安全地使用本地存储，不仅要测试支持性，还要测试获取和设置项目的能力，这是一个好习惯。

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

结论

也许是时候开始重新考虑本地存储及其潜在用途了，特别是在移动设备上，我们可以使用它来避免延迟瓶颈。 我们可以开始考虑缓存资产的新方法，然后将其立即提供给我们的用户。 我们已经看到，已经有一些以非常规方式成功实现本地存储使用的方法。

翻译自: https://www.sitepoint.com/html5-local-storage-revisited/

skysat重访周期