客户端存储/缓存大型HTML

Client Side Storage/Caching Large HTML

本文关键字：大型 HTML 缓存 存储 客户端      更新时间：2023-09-26

我有一个网页，它引用并初始化同一ASP.NET通用用户控件的多个实例。

我想做的是使用jquery detach()方法将这些控件的全部内容（html）缓存/存储在客户端的某个位置。

localStorage的解决方案不适合这里，因为它的限制是5MB，这对我的需求来说很低。

目前，我正在使用一个全局变量和更具体的javascript数组（键值）来存储数据。

你觉得这个解决方案怎么样？我会注意到浏览器有任何滞后或性能问题吗？这个全局var有限制吗？

此外，有没有更好的方法来执行这样的任务？

为了实现跨浏览器兼容性，您可以尝试AJAX调用，该调用可以提取/增量您的海量数据并缓存该调用（存储为JSON/JSONP）。jQuery有一个缓存机制，但实现的重点将放在页面调用的头上。特别是，您将希望在AJAX中的页面上添加Expires、Last-Modified和Cache-Control。

然后，您将希望异步地引入数据，并进行适当的UI操作（如果需要）。

您不希望将大量数据存储在单个变量中，因为它在经过JS过程时需要更长的时间。

localStorage仍然是一种边缘技术，不同供应商的实现方式不同，并且不向后兼容（尽管有JavaScript库可以帮助降低向后兼容性）

Cookie不够大

页面JSON或JS变量您会失去抽象并增加初始页面权重（如果您在移动设备上，这将不令人满意）

无论你做什么实现，我都会运行一些简单的基准性能测试，这样你就有了备份代码的指标

这将导致浏览器滞后和多个问题。你几乎可以保证移动浏览器在这种情况下不会工作，因为没有一个合理的移动浏览器会让你下载5MB+并将其存储在LocalStorage对象中。将5MB+的HTML放入任何浏览器的DOM中，而不期望出现任何性能问题，这是一个非常糟糕的主意。

如果你不关心移动，那么看看IndexedDB。它允许更大的存储量，并且即使在会话关闭后也会持续存在。它在最近的Chrome和Firefox浏览器中得到了很好的支持，但需要IE10或更高版本。

相关文章：