HTML5本地存储重新审视

钥匙要点

Web Storage API的一部分
• HTML5本地存储允许在浏览器中存储数据存储，其容量为2MB至10MB，具体取决于浏览器，协议，端口和顶级域。与cookie不同，此数据未发送回服务器，并在会话和设备之间持续持续。
>
• >由于本地存储的同步性可能会受到性能，但它的速度可能比移动设备上的本机缓存更快。为了优化性能，建议限制读取，仅在窗口之后访问本地存储。
>并非所有浏览器都支持在私人或隐身模式下本地存储中设置项目，在某些情况下，退出后，以私有模式存储的数据被清除。为了确保安全使用本地存储，建议不仅要测试支持，还建议获得和设置物品的能力。>

>本地存储是HTML5 Web Storage API的一部分，它允许您将数据存储在浏览器中。与cookie不同，使用本地存储存储的数据不会发送回服务器。所有数据都停留在客户端上，您当前可以存储从2MB到10MB。此限制与使用的特定浏览器，协议（HTTP或HTTPS），端口和最高级别域相关。> 在本文中，我们将讨论如何使用此API来提高网站的性能。我会假设您知道什么是本地存储和暴露的方法，但是如果您需要复习，我建议您阅读Colin Ihrig的Web Storage API概述。

可用的磁盘空间

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

移动浏览器：

浏览器 chrome android浏览器 firefox > ios Safari 版本 40 4.3 34 6-8 可用空间 10MB 2MB 10MB 5MB 桌面浏览器：

浏览器 chrome > Opera firefox > Safari > Internet Explorer 版本 40 27 34 6-8 9-11 可用空间 10MB 10MB 10MB 5MB 10MB >本机缓存vs本地存储

使用本地存储时，您的数据将留在客户端上，并在会话和设备重新启动之间持续使用。正如我在简介中提到的那样，本地存储API的限制与特定浏览器（如上一个表中所示），协议，端口和最高级别域相关。相比之下，浏览器本机缓存上可用的空间在网站上共享，并且在移动设备上较小。它经常被冲洗，有时甚至在同一访问中。移动设备还有一个其他问题：它们不如桌面设备强大，因此必须实现良好的性能。

>关于本地存储性能的讨论很多。例如，以前与莫齐拉（Mozilla）一起写的克里斯蒂安·海尔曼（Christian Heilmann）写道：“没有简单的解决方案用于本地存储”。如果不仔细使用，本地存储可能会受到性能的打击。您需要考虑的第一件事是它是同步API，因此它阻止了主UI线程。本地存储写入并读取来自硬盘驱动器的数据，这比从内存中阅读要贵得多。为了使您访问数据，本地存储需要从磁盘中读取数据，这就是性能命中的地方。这种性能命中并不是少量数据的主要问题，但是使用完整的存储限制可以很明显。

作为一个很好的做法，您应该尝试执行尽可能少的读取。另外，由于我们正在处理同步API，因此您应该尝试仅在窗口启动窗口后才从本地存储中读取数据，以避免阻止UI线程。

事物已经改变

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

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

谁在使用本地存储？

>

>最近有一些网站使用本地存储来缓存资产，例如使用本地存储进行关键路径CSS的监护人。您可以在2014年速度会议上查看此演示文稿，以了解他们如何做到这一点。

>最近也开始在本地存储中加入Web字体。在本文有关最近在其网站上实施的一些绩效改进的文章中，他们报告了推迟的网络字体并将其缓存在当地存储中，这导致了最有效的改进。

>

私有浏览的注释

如Caniuse.com在“标签已知问题”上报道的，在以私有或隐身模式运行时，Safari，ios Safari和Android浏览器不支持在本地存储中设置项目。

>

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

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

>

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

>

结论

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

经常询问有关HTML5本地存储的问题（常见问题解答）

> HTML5本地存储的最大存储限制是多少？但是，大多数现代浏览器每个域提供约5MB的存储空间。这明显大于cookie提供的4KB（约4096个字节）。重要的是要注意，此存储是每个域，而不是每个本地存储对象。>如何检查浏览器是否支持HTML5本地存储？

>您可以通过在JavaScript中使用“ IN”运算符来检查浏览器是否支持HTML5本地存储。这是一个简单的代码段，检查本地存储支持：

if（window && window中的'localStorage'&& window ['localStorage']！== null）{ //支持本地存储
> } else {
//不支持本地存储
}

}

>如何从HTML5本地存储中清除数据？

>您可以使用clear（）方法从HTML5本地存储中清除数据。此方法从当前域的本地存储中删除了所有键值对。这是一个简单的代码片段：

localstorage.clear（）;

>我可以存储对象或数组中的html5 local Storage中吗？

是的，您可以将对象或数组存储在HTML5本地存储。但是，本地存储仅支持字符串键值对。因此，您需要在存储之前使用json.stringify（）将对象或数组转换为字符串，然后在检索时使用json.parse（）将其转换回对象或数组。本地存储和会话存储之间的区别？

>本地存储和会话存储之间的主要区别在于其寿命和范围。即使关闭浏览器并重新打开浏览器，本地存储中的数据仍然存在，而页面会话结束时会话存储中的数据将被清除，即当关闭浏览器时。>我如何迭代本地中的所有值存储？

您可以使用简单的循环与localstorage.key（）方法和localStorage.getItem（）结合使用for Loop（）迭代本地存储中的所有值方法。

>可以在子域之间共享本地存储吗？

不，不，在子域之间无法共享本地存储。每个子域都有其自己的独立本地存储。

可以在不同的浏览器之间传输本地存储数据吗？

不，不能在不同的浏览器之间传输本地存储数据。每个浏览器都有其自己的独立本地存储。

>

>如何处理本地存储配额超过错误？

当超​​过本地存储配额时，抛出了quota_exceeded_err异常。您可以通过将其捕获在试用块中并采取适当的措施来处理此异常，例如清除某些空间或通知用户。

>

以上是HTML5本地存储重新审视的详细内容。更多信息请关注PHP中文网其他相关文章！