HTML5离线缓存应用.docVIP

HTML5离线缓存应用 打开一个网页，加载完后，如果突然断网了，那么重新刷新后页面就没了。 有没有想过，刷新后页面还是刚才页面，在新窗口中再打开一个页面，输入相同的网址，在断网的状态下打开还是原来那个页面。HTML5的离线应用正提供了这样一个功能。 在页面中的数据加载时，你可以自己设定一些要缓存的图片、flash、css、js、html等文件，等下次不能联网的情况下，你可以用那些缓存的文件。这就是HTML5的离线应用。 其实它实现起来很简单。 需要服务器。这里用tomcat服务器来讲解。 首先要先把以manifest为后缀的文件的mine类型配置为text/cache-manifest。 一讲到tomcat配置，熟悉的自然就会想到web.xml这个文件，在该文件中加入如下配置就行： mime-mapping manifest mime-type text/cache-manifest /mime-type /mime-mapping 然后写一个xxx.manifest文件，xxx是自己取的一个名字。这个文件的格式是这样的： CACHE MANIFEST CACHE:MyTest.html CSS/main.css Javascript/bwH5LS.js exp-calif-logo.gif 第一行是必须的，它标识这是manifest的配置文件。 CACHE: 这行指示出下面的文件是要缓存的。示例中，缓存了当前页面：MyTest.html，以及一些css和js文件 还有图片。 还有几个关键字示例中没提到，就是 NETWORK: FALLBACK: NETWORK 指不想缓存的页面； FALLBACK 是指请求的文件没有找到或该文件的服务器没有响应时的替代方案，比如我们想请求某个嵌套页面，但这个页面的服务器连接不上了，那么我可以转向另外一个指定的页面。 这是第二步， 第三步只要在 标签中加上manifest的位置就行了： html manifest NAME.manifest 到这里，就可以实现简单的离线应用了。 重点注释：html5离线缓存只能缓存静态HTML文件，而且默认缓存当前页，所以为了解决动态页使用缓存来减少服务器压力，我们使用iframe 来引入一个拥有 manifest 的静态文件iframe可以把我们要引用的固定不变的js 图片给缓存出来，但是用户不能刷新页面，因为刷新页面的请求和打开页面的请求不一样。 本地缓存：localStorage 的使用 Localstorage 本地缓存，使用html5浏览器自带5兆缓存空间来存放数据，本地缓存不能实现离线访问，也不能实时更新数据，但是可以对动态页动态数据部分进行本地存储，只要给Localstorage添加一个定时更新触发功能，就可以定时更新本地缓存，这样用户在联网的情况下打开以前打开过的页面直接调用本地缓存数据，这种效果在数据信息不经常更新的页面很实用。 具体做法： */ var LS /** * 获取/设置存储字段 * @param String name 字段名称 * @param String value 值 * @return String */ item : function name,value var val null; if LS.isSupportLocalStorage if value localStorage.setItem name,value ; val value; else val localStorage.getItem name ; else console.log 浏览器不支持html5的本地存储！ ; return val; , /** * 移除指定name的存储 * @param String name 字段名称 * @return Boolean */ removeItem : function name if LS.isSupportLocalStorage localStorage.removeItem name ; else console.log 浏览器不支持html5的本地存储！ ; return false; return true; , /** * 判断浏览器是否直接html5本地存储 */ isSupportLocalStorage : function var ls LS,is ls.IS_HAS_LOCAL_STORAGE; if is null if window.localStorage is ls.IS_HAS_LOCAL_STORAGE true; return is; , IS_HAS_LOCAL_STORAGE : null