html5中的应用缓存文件 html5 缓存

HTML5什么是应用程序缓存

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

实例

!DOCTYPE HTML

html manifest="demo.appcache"

body

The content of the document......

/body

/html

相关问答

Q1: html5 离线缓存怎么实现的

HTML5离线存储和本地缓存

一.离线存储

   有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来

   1.在index.html里加上html manifest="test.manifest"

   2.manifest清单格式如下

CACHE MANIFEST

#上面一句必须

#v1.0.0

#需要缓存的文件

CACHE:

a.js

b.css

#不需要缓存的文件

NETWORK:

*

#无法访问页面

FALLBACK:

404.html

   3.manifest文件的mime-type必须是 text/cache-manifest类型

   注意点：

   1.对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察

   2.如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1

　4.离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本

window.applicationCache.addEventListener('updateready',function(e){

    if(window.applicationCache.status == window.applicationCache.UPDATEREADY){

        window.applicationCache.swapCache();

        

        if(confirm("loding new?")){

            window.location.reload()

        }

    }

},false)    

 

二.本地缓存

localStorage.setItem("key","value")

localStorage.getItem("key","value")

localStorage.removeItem("key")

localStorage.clear()

    1.本地存储永不过期，除非自己去清除

    2.可以通过chrome浏览器Resources/Local Storage来查看

    3.不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1

Q2: 什么是HTML5 APPcache

AppCache 在 HTML5 规范中进行定义，通过它可创建脱机 Web 应用程序。AppCache 使网页能够在本地缓存（或保存）资源，包括图像、脚本库和样式表等。此外，AppCache 还允许使用标准的统一资源标识符 (URI) 表示法从缓存内容中提供 URL。

使用 AppCache 在本地保存资源，你可以通过减少主机服务器的请求数量来改善网页性能；此外，你还可以脱机访问缓存的资源。

若要在本地缓存资源，需要执行下列操作：

1. 创建一个清单文件，以指定你要保存的资源。

2. 在要使用缓存资源的每个网页中引用该清单文件。

Q3: html5离线缓存是存储到哪里了，我设置离线缓存后为什么在线也打开的是缓存文件

用frame的方法来解决，搜了一下相关文档，应该是不可以的。他的思路是并不存储当前被访问的页面，而是用iframe引入一个页面，在那个页面中调用manifest文件来达到存储列表内资源的目的，根据文档所写：“. a,b两个页面,引入相同资源,但a有使用manifest,而b没有.

那么,即使a页面缓存了资源.b页面也不会有效.而且b页面强制更新了资源.

页面的缓存也不会因为b的更新，而更新.”

关于html5中的应用缓存文件和html5 缓存的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。