HTML5与CSS3 Web前端开发技术第9章 离线Web应用和Web存储.pptVIP

HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 * 第9章 离线Web应用和Web存储 离线Web应用 1 离线Web应用的实现 2 Web Storage的概述 3 Web Storage应用 4 9.1 离线Web应用 1、离线Web应用工作机制 （1）客户端浏览器中输入要访问页面的URL地址，向该地址指向的Web服务器发出请求。 （2）Web服务器根据浏览器送来的请求，将请求的文档和所需资源返回给浏览器。 （3）浏览器解析返回的文档，处理或显示从Web服务器返回的资源文件。如果支持离线Web应用，重点考察manifest缓存文件，该文件由html标记的manifest属性指定。 9.1离线Web应用 2、离线Web应用优点 （1）离线浏览。用户可以在离线时继续使用Web应用程序 （2）提高用户Web应用体验。将资源缓存到本地，资源加载速度更快，缩短Web应用的响应时间。 （3）减轻Web服务器的负载。浏览器只需要从Web服务器下载更新过或更改过的资源。 使用应用缓存实现离线Web应用中，需要在HTML文档的html标记中包含manifest属性，并在其中指明manifest文件，该文件的扩展名应为建议为”.appcache”或” .manifest”。 manifest文件是一个文本文件，其中包含离线Web应用程序需要加载的文件列表。 9.1 离线Web应用 2、离线Web应用优点 （1）离线浏览。用户可以在离线时继续使用Web应用程序 （2）提高用户Web应用体验。将资源缓存到本地，资源加载速度更快，缩短Web应用的响应时间。 （3）减轻Web服务器的负载。浏览器只需要从Web服务器下载更新过或更改过的资源。 使用应用缓存实现离线Web应用中，需要在HTML文档的html标记中包含manifest属性，并在其中指明manifest文件，该文件的扩展名应为建议为“.appcache”或“manifest”。 manifest文件是一个文本文件，其中包含离线Web应用程序需要加载的文件列表。 9.2 离线Web应用的实现 HTML5离线Web应用的实现一是构造合理的manifest文件，从而实现资源缓存；二是检测在线状态并实现缓存更新。 1、manifest文件 (1)在线和离线Web应用的效果 9.2 离线Web应用的实现 示例9-2是使用了缓存文件的html文件。 （1）第一次在线访问Web服务器。 9.2 离线Web应用的实现 示例9-2是使用了缓存文件的html文件。 （2）关闭xmapp的Apache服务器，离线访问Web服务器 （3）缓存被清空后，离线访问Web服务器。 9.2 离线Web应用的实现 manifest文件解析 manifest缓存文件是离线Web应用的关键，该文件清单的内容具体说明如下。 ? manifest文件第一行必须是CACHE MANIFEST，文件扩展名建议使用appcache，也可以使用manifest。 ? CACHE：指定需要缓存的文件，清单中列出的文件在首次访问Web服务器进下载并缓存。 ? NETWORK：指定的文件需要与服务器连接才能获取，不会被缓存。 *是文件通配符，代表除了在CACHE中指明的文外件，所有其他文件都不缓存，需要从Web服务器获得。 ? FALLBACK：在此选项下列出的文件当页面无法访问时，使用备用的资源文件。 ? 文件编码必须是utf-8。 实现应用缓存，需要在html标记中定义manifest属性，从而在网页中引用manifest文件，例如： html manifest=test.appcache 9.2 离线Web应用的实现 2、更新缓存 (1)用户更新缓存 可以手动清空缓存，然后再在线访问Web服务器，这时页面是会更新的。浏览器会在第一次访问Web应用程序时将manifest文件中指定的文件下载并保存在本地缓存中。 (2)调用Javascript接口更新缓存 HTML5的Application Cache API，除了可以实现离线资源缓存，也可以用其实现本地缓存更新。 9.2 离线Web应用的实现 示例9-3是更新缓存的一个典型示例。 9.2 离线Web应用的实现 3、检测在线状态 除了将服务器的资源缓存在本地外，离线Web应用还应该能够在离线时将要提交给服务器的数据保存在本地，等在线时再将其同步到服务器。 9.3 Web Storage概述 1、Web Storage的概念 在Web应用中，有时会希望由Web页面来记录或处理一些信息，例如用户登录状态、计数器或者用户需要和页面频繁交互的数据等。这时，