hap16本地存储与离线应用.pptVIP

处于离线状态： * Tomcat 关闭 * 在开发支持离线的 Web 应用程序时，开发者通常需要使用以下三个方面的功能： 1.离线资源缓存：需要一种方式来指明应用程序离线工作时所需的资源文件。这样，浏览器才能在在线状态时，把这些文件缓存到本地。此后，当用 户离线访问应用程序时，这些资源文件会自动加载，从而让用户正常使用。HTML5 中，通过 cache manifest 文件指明需要缓存的资源，并支持自动和手动两种缓存更新方式。 2.在线状态检测：开发者需要知道浏览器是否在线，这样才能够针对在线或离线的状态，做出对应的处理。在 HTML5 中，提供了两种检测当前网络是否在线的方式。 3.本地数据存储：离线时，需要能够把数据存储到本地，以便在线时同步到服务器上。为了满足不同的存储需求，HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式，而后者提供了基本的关系数据库存储功能。 * cache manifest工作原理 * 如何更新离线存储？ 当用户本地再次联网的时候，本地的离线存储资源需要检查是否需要更新，这个更新过程，也是通过manifest的更新来控制的，更新了manifest文件，浏览器会自动的重新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的重新请求（第三次刷新替换本地缓存为最新缓存），而且这个请求是全局性的，也就是所有在manifest缓存列表中的文件都会被请求一次，而不是单独请求某个特定修改过的资源文件，因为manifest是不知道哪个文件被修改过了的。 * 更新缓存 应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。 1.自动更新（更新manifest文件） 浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。 2手动更新（通过javascript操作） 2.1.开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。 2.2.清除浏览器缓存 * 控制离线存储的更新，需要2个步骤，一是更新资源文件，二是更新manifest文件 更新manifest文件是不需要修改什么特定内容的，只要是这个文件随意一处被修改，那么浏览器就会感知 一个比较好的方式是更新任意一处# 开头的注释即可，其目的只是告诉浏览器这个manifest文件被更新过。 * 清单 5 手动更新缓存 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛ window.applicationCache.update(); ｝ * /*code2，缓存公用方法*/ // var EventUtil = { // addHandler: function(element, type, handler) { // if (element.addEventListener) { // element.addEventListener(type, handler, false); // } else if (element.attachEvent) { // element.attachEvent(“on” + type, handler); // } else { // element[on + type] = handler; // } // } // }; // EventUtil.addHandler(applicationCache, “updateready”, function() { //缓存更新并已下载，要在下次进入页面生效 // applicationCache.update(); //检查缓存manifest文件是否更新，ps:页面加载默认检查一次。 // applicationCache.swapCache(); //交换到新的缓存项中，交换了要下次进入页面才生效 // location.reload(); //重新载入页面 // }); * applicationCache对象 applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window