H5 缓存：离线应用的基石

大家好，最近在思考H5 缓存。
这真的非常重要。
离线应用的核心就靠它了。
让我告诉你我所理解的。

比如2 02 3 年，我在上海的一个商场建了一个H5 事件，专门使用了缓存。
用户首次登录时，HTML、CSS、JS等静态资源会自动保存在本地。
下次打开它时，浏览器会首先检查它是否在缓存中。
如果有就直接使用，不用每次都去服务器解压。
这一点特别好。

想一想，就像在地铁上看新闻一样，没有网络吧？缓存将允许您继续阅读本文。
上次我使用APP观看视频时，它会缓存前几分钟，然后在有互联网连接时同步。
体验好多了。

有不同类型的缓存。
之前用过AppCache，但是比较复杂，版本控制还得手动完成。
现在几乎没有人使用它。
现在主要的是ServiceWorker。
我今年在深圳搭建的一个电商H5 就使用了ServiceWorker。
它相当于您的浏览器和互联网之间的代理。
它可以精确控制哪些资源应该被缓存以及过期时如何更新它们。
该代码仅用于注册 SW 文件，然后拦截请求。

储存方法也有讲究。
localStorage适合保存用户设置，例如“我更喜欢白天模式”等。
IndexedDB可以存储更多的数据。
我在做H5 教学，使用IndexedDB缓存一些课程数据，可以离线查看。
但要小心，IndexedDB 清理起来比 localStorage 麻烦很多。

但是，缓存并不是万能的。
想想看，用户可以随时手动清除缓存。
这时候肯定有B计划，比如提示“您已清除缓存，部分功能无法使用”。
还有数据一致性。
例如，如果产品价格更新了，但缓存还是旧的，你需要想办法让用户知道该更新了。
我记得在2 02 2 年做一次H5 旅行时，我就掉进了这个陷阱。
最初地图数据的缓存非常好，但结果服务器版本没有同步缓存策略。
用户看到过期的路线并抱怨很多。

不管怎么说，H5 缓存是个好东西，但是使用的时候也要小心。
如何选择缓存类型以及如何管理取决于你的H5 是做什么的。
我还在思考一个问题：未来还会有更好的存储方案吗？不过，这取决于你。

html5离线存储缓存列表可以动态生成吗

清单文件用于离线缓存。

清单文件写入资源 URL 列表。

浏览器读取清单文件并缓存资源。

没有互联网连接时自动使用缓存。

所有主流浏览器都支持它。

离线存储可以存储页面和图像。

自定义缓存规则。

用于复制资源的本地存储。

自己掂量一下。

HTML5是什么？

哎哟，听你讲了这么多HTML5 ，我记得前年帮小李建了那个旅游网站。
他当时是用HTML5 来做的，尤其是行程展示。
他使用了