HTML5离线应用和离线存储的调研报告v1.0(双十二,双蛋,天猫伊语衣颜).docVIP

HTML5离线应用和离线存储 离线应用机制 基础知识描述 如果要对离线应用的机制进行实际的开发，需要对离线机制的原理和api有一些理解，并且还有他的事件机制，可以帮助我们自动和检测更新。比较重要的几点： 离线应用需要服务器的支持，只有在服务器允许的情况下才能做离线应用 离线应用需要一个描述文件，这个文件描述了哪些文件被缓存，哪些文件不被缓存等一些相关的信息 离线应用有自己相关的事件和api，需要好好的理解，通过对事件的监听，就可以完成比较强大的离线应用。 描述文件： 一个文本文件，第一行必须为CACHE MANIFEST，这个应该是一种标识，他告诉浏览器这是一个离线描述文件，告诉浏览器什么文件该缓存什么不该缓存，例如： CACHE MANIFEST a.html b.css c.js 他告诉浏览器要缓存a.html,b.css,c.js等文件 事件： 事件源为applicationCache，通过监听这个对象的某一些事件，来实现对离线机制的实现。事件描述如下： Cached：更新已经完成，并且存储，只在第一次下载缓存成功后的调用 Checking:获取版本信息，并检查manifest，无论什么时候都会触发的事件 Downloading:开始下载新的资源，只要需要下载资源则会触发本事件 Error：当获取manifest失败服务器端发生错误时，发生此事件 Noupdate:没有更新 Updateready：更新完成可以启用新的缓存,第二次更新完成后的调用 Progress:浏览器在下载过程中可以监听下载的过程和进度，从事件中还可以获取下载完成了几个文件。 Api: 调用javascript的api更新程序 if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛ window.applicationCache.update(); ｝ 切换缓存： applicationCache.swapCache();本方法不会更新页面内容，需要调用 location.reload();才能更新页面。 实例描述 实例名称： 一个简单的离线应用 实例条件： 熟悉Dreamweaver 离线应用相关知识 实现过程： 建立mainf.html 写入html和js代码并预览 技术价值 离线应用的技术价值在于： 当用户离线时可以浏览想要的内容，提高应用的可用性 只下载需要的文件资源，降低对服务器的压力 离线存储 基础知识描述 HTML5两种本地存储机制： DOM storage web sql Database DOM storage提供一种key-value的存储方式，更方便的操作数据。 Web sql Database 提供一种简单的关系型数据的操作数据的方式。 DOM storage分两种： sessionStorage只在窗口打开时有效，当浏览器窗口关闭时将失效 localStorage用于长期存储数据，所有浏览器都可以共享localStorage。 Web sql database是一个好东西，他支持事物和最基本的关系型数据库的操作，就算多浏览器操作也不会使数据发生异常。在实际的应用场景中，离线时，我们可以把数据先存储到本地然后更新到服务器。 实例描述 实例名称： 一个简单的 DOM storage例子 实例条件： 熟悉dreamweaver DOM storage相关的知识 网页相关知识 实现过程： 建立storage.html 写入js代码并预览 技术价值 提高可用性，在离线状态也能支持数据操作 降低服务器资源