HTML5学习之离线存储基础知识

AppCache离线存储详解

最新推荐文章于 2025-05-26 23:08:15 发布

weixin_34268310

最新推荐文章于 2025-05-26 23:08:15 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5af68e416fb9a07aa83ece7c

本文详细介绍了HTML5中AppCache离线存储的工作原理及使用方法。解释了如何通过manifest属性指定缓存文件，以及CACHE MANIFEST、NETWORK和FALLBACK三部分的作用，并提供了具体的示例。

原理

基于一个新建的.appcache文件的缓存机制(非存储技术),通过这个文件上的解析清单离线存储资源,这些资源会像cookie一样被存储下来.在之后当网络处于离线状态时,浏览器会利用这些被离线存储下来的数据来展示页面.

使用离线存储

html新增了一个manifest属性,可用于指定当前页面的appache文件, 创建一个和html同名的appache文件,比如index.html,就可以创建一个index.appache文件.

<!DOCTYPE HTML>  
<html manifest = "cache.manifest">
    //网页内容...
</html>  
复制代码

离线存储的manifest组成部分

manifest(.appcache)文件是简单的文本文件,它告知浏览器被缓存的内容和不缓存的内容.

首先展示一下cache.manifest文件的书写方式,如:

CACHE MANIFEST
# 2018-05-12 v1.0.0
/style.css
/logo.gif
/index.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
复制代码

离线存储的mainfest一般由三个部分组成：

CACHE MANIFEST:
必选,里面包括需要被离线存储的资源列表,在此标题下列出的文件将在首次下载后进行缓存.
```
    CACHE MANIFEST 
    # 2018-05-12 v1.0.0
    /style.css
    /logo.gif
    /index.js   
复制代码
```
表示当manifest文件加载后,浏览器会下载网站当前目录的style.css , logo.gif , index.js三个文件,然后,无论用户什么时候和网络断开,这三个文件都还是可用的.
NETWORK:
可选,里面包括不会被缓存的内容,在次标题下列出的文件只有在在线的情况下才能被访问,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高.
```
NETWORK:
login.asp
复制代码
```
表示login.asp不会被缓存起来,且离线时不可以使用.
可以使用星号来指示所有其他资源/文件都需要因特网连接:
```
NETWORK:
*
复制代码
```
FALLBACK:
可选,表示如果第一个资源访问失败,就使用第二个资源替换. 比如：
/html/ /404.html表示用"404.html"替代当/html/目录中的所有文件方访问失败时的页面.
//404.html表示用"404.html"替代当前目录中的所有文件.
*.html/404.html表示用"404.html"文件代替所有html文件.
```
FALLBACK:
/html5/ /404.html
复制代码
```
表示当无法建立因特网连接时,用"404.html"替代当/html5/目录中的所有文件.

注意：以 "#" 开头的是注释行,但也可满足其他用途.应用的缓存会在其 manifest 文件更改时被更新.如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存.更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

浏览器如何对离线存储的资源进行管理和加载

在线情况下
浏览器发现html头部有manifest属性,它会请求manifest对应文件.
如果是第一次访问,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储.(????)
离线情况下
浏览器就直接使用离线存储的资源.

更新缓存的方式

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使修改了服务器上的文件.为了确保浏览器更新缓存,需要更新manifest 文件.更新方式有：

更新manifest文件
给manifest文件添加或删除文件,或者没有添加或删除文件,只修改了文件,可以通过更改版本号等来更新manifest文件.(论#注释的重要性!)
通过js操作手动更新 window.applicationCache.update()
清除浏览器缓存
如果用户清除了浏览器缓存（手动或用其他一些工具），都会重新下载文件。

参考网站:
https://segmentfault.com/a/1190000006984353 https://blog.youkuaiyun.com/zhouziyu2011/article/details/58588546 https://www.cnblogs.com/shoestrong/p/6435169.html

转载于:https://juejin.im/post/5af68e416fb9a07aa83ece7c