html5 如何做到application cache？离线储存技术的简要说明

互联网 18-9-8

本章我们给大家介绍用html5 如何做到application cache？简要说明离线储存技术。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在HTML5之前，我们必须连接网络才能访问页面。但随着移动互联网的兴起，设备终端的位置不在固定。而移动设备非常依赖无线信号，可无线网络的可靠性并不稳定，比如在过隧道或是信号强度弱的地方，无法访问网站，这无疑对用户体验是不好的，所以HTML5中的离线缓存（applicationCache）就解决了这个问题。

<script>     if(window.applicationCache){         alert("支持离线缓存");     }     else{         alert("不支持离线缓存");     } </script>

二：使用方法

HTML5离线缓存，是从浏览器的缓存中分出来的一块缓存区，若要在这个缓存中保存数据，需要使用描述文件（.manifest），列出需要下载和缓存的资源。

1.引入manifest文件

<!DOCTYPE html> <html> <head> <!--就是在这里引入，注意引入也是讲究路劲跟文件名的，       这里文件名是test，后缀是mainfest，路劲在当前的html下面      （一般放在html当前文件夹下面也没什么问题，我是这么放的）--> <html manifest="test.manifest"> <meta charset="UTF-8"> <title>html5 离线缓存</title> </head> <body> </body> </html>

2.引入完了之后，接下来就是test.mainfest文件代码的编写了。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分： ①CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 ②NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 ③FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

完整的代码

CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE:     m.png     test.js     test.css NETWORK:     * FALLBACK     online.html offline.html

manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。

应用在离线后将保持缓存状态，除非发生以下某种情况：用户清除了浏览器对您网站的数据存储。清单文件经过修改。

请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。

1）缓存状态：window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态。

applicationCache.status的值如下： 0 === 未缓存　　1 === 空闲（缓存为最新状态）　　2 === 检查中　　3 === 下载中　　4 === 更新就绪　　5 === 缓存过期

var appCache = window.applicationCache;  switch (appCache.status) {  　　case appCache.UNCACHED: // UNCACHED == 0  　　　　return 'UNCACHED';  　　　　break;  　　case appCache.IDLE: // IDLE == 1  　　　　return 'IDLE';  　　　　break;  　　case appCache.CHECKING: // CHECKING == 2  　　　　return 'CHECKING';  　　　　break;  　　case appCache.DOWNLOADING: // DOWNLOADING == 3  　　　　return 'DOWNLOADING';  　　　　break;  　　case appCache.UPDATEREADY: // UPDATEREADY == 4  　　　　return 'UPDATEREADY';  　　　　break;  　　case appCache.OBSOLETE: // OBSOLETE == 5  　　　　return 'OBSOLETE';  　　　　break;  　　default:  　　　　return 'UKNOWN CACHE STATUS';  　　　　break;  　　};

2）主动更新缓存：applicationCache.update()

<script>    //利用定时器隔一定时间自动更新一下缓存     setInterval(function(){             applicationCache.update();     },50000);</script>

要以编程方式更新缓存，请先调用 applicationCache.update()。此操作将尝试更新用户的缓存（前提是已更改清单文件）。最后，当applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 即可将原缓存换成新缓存。

var appCache = window.applicationCache; appCache.update(); // Attempt to update the user's cache. ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache();  // The fetch was successful, swap in the new cache.

4.一个简单的离线缓存的应用

建一个web工程AppCache,包括四个文件：appcache_offline.html

<html manifest="test.manifest"> <head> <title>AppCache Test</title> <link rel="stylesheet" href="test.css"> <script src="test.js"></script> </head> <body> <p><output id="test"></output></p> <div id="log"></div> </body> </html>

manifest文件：test.manifest

CACHE MANIFEST #VERSION 1.0 CACHE: test.css

output { font: 2em sans-serif; }

test.js

setTimeout(function () { document.getElementById('test').value = new Date(); }, 1000);

以上就是html5 如何做到application cache？离线储存技术的简要说明的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： Html5

html5 如何做到application cache？离线储存技术的简要说明

相关资讯

标签推荐