HTML5的离线储存

MoMokolyouo

已于 2022-02-14 16:29:37 修改

阅读量400

点赞数

文章标签： html5 前端 javascript

于 2022-02-14 16:26:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43342124/article/details/122927119

版权

本文详细介绍了如何创建和使用manifest文件进行网页离线存储。通过设置CACHE、NETWORK和FALLBACK部分，可以指定哪些资源需要缓存、哪些只在线访问以及离线时的备用页面。理解manifest文件的用法对于提升Web应用的离线可用性和用户体验至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建一个 manifest 文件(eg:test.manifest)，然后在页面头部加入 manifest 属性

<html lang="en" manifest="test.manifest">

CACHE MANIFEST
#v0.11
#需要缓存的文件
CACHE:
index.css

#不需要缓存的文件
NETWORK:
index.html

#无法访问页面
FALLBACK:
/ /offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。