HTML离线存储

最新推荐文章于 2023-06-05 16:00:56 发布

Whisper_a

最新推荐文章于 2023-06-05 16:00:56 发布

阅读量563

点赞数

分类专栏：最近总结的问题

本文链接：https://blog.csdn.net/Whisper_a/article/details/38708053

版权

最近总结的问题专栏收录该内容

19 篇文章 0 订阅

订阅专栏

当使用离线存储的时候首要要家里后缀名为manifest的文本文件，里面写的是要缓存的文件

<html manifest="test.manifest">
  ...
</html>

2 test.manifest的结构如下

CACHE MANIFEST
# wanz app v1

# 指明缓存入口
CACHE:
index.html
style.css
images/logo.png
scripts/main.js

# 以下资源必须在线访问
NETWORK:
login.php

# 如果index.php无法访问则用404.html代替
FALLBACK:
/index.php /404.html

其中第一行的CACHE MANIFEST是必须的

CACHE 表示要缓存的文件

NETWORK表示必须在线访问的文件

FALLBACK表示无法访问时用404.html代替

#是用来注释一行的，但它还有一个小作用。web应用的缓存只有在manifest文件被修改的情况下才会被更新，所以如果你只是修改了被缓存的文件，那么用户本地的缓存还是不会被更新的，但是你可以通过修改manifest文件来告诉浏览器需要更新缓存了。利用这点，你可以像上面的例子中那样，写一句这样的注释一个文件版本：

<span style="font-size:18px;"># ME v 1.0</span>

这样写有三个好处：

你可以很明确的了解离线web应用的版本
通过简单的修改这个版本号就可以轻易的通知浏览器更新
你可以配合JavaScript程序来完成缓存更新

3更新离线缓存

用户清除了离线存储的数据，这个不一定就是清理浏览器历史记录就可以做到的，因为不同浏览器管理离线存储的方式不同。比如Firefox的离线存储数据要到“选项”=>“高级”=>“网络”=>“脱机存储”里才可以清除。
manifest文件被修改，上面说的，你修改了manifest文件里所罗列的文件也不会更新缓存，而是要替换manifest文件
使用JavaScript api编写更新程序

4javascript api

cache = window . applicationCache
返回应用于当前window对象文档的ApplicationCache对象

cache = self . applicationCache
返回应用于当前shared worker的ApplicationCache对象 [shared worker]

cache . status
返回当前应用的缓存状态，status有五种无符号短整型值的状态：
UNCACHED = 0;
IDLE = 1;
CHECKING = 2;
DOWNLOADING = 3;
UPDATEREADY = 4;
OBSOLETE = 5;

cache . update()
调用当前应用资源下载过程

cache . swapCache()
更新到最新的缓存，这个不会使得之前加载的资源突然被重新加载。图片不会重新加载，样式和脚本也不会重新渲染或解析，唯一的变化是在此之后发出请求页面的资源是最新的