有趣的HTML5：离线存储

echo_sen

于 2024-04-24 18:00:14 发布

阅读量561

点赞数 5

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_64389737/article/details/138165971

版权

首先来讲解下离线存储的使用方法，说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<!DOCTYPE HTML>
<html manifest = "cache.manifest">
...
</html>

然后cache.manifest文件的书写方式，就像下面这样：

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

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

注意点：

要确保浏览器支持离线缓存

    if ('applicationCache' in window) {
        // 浏览器支持应用程序缓存
        console.log('浏览器支持应用程序缓存 (Application Cache)。');
      } else {
        // 浏览器不支持应用程序缓存
        console.log('浏览器不支持应用程序缓存 (Application Cache)。');
      }

echo_sen

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
有趣的HTML5：离线存储

2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。首先来讲解下离线存储的使用方法，说起来也很简单。要确保浏览器支持离线缓存。
复制链接

扫一扫