HTML第9章-离线Web应用和Web存储课件.ppt

1、第第9章章 离线Web应用和Web存储离线离线Web应用应用1离线离线Web应用的实现应用的实现2Web Storage的概述的概述3Web Storage应用应用49.1 离线Web应用1、离线离线Web应用工作机制应用工作机制（1）客户端浏览器中输入要访问页面的）客户端浏览器中输入要访问页面的URL地址，向该地地址，向该地址指向的址指向的Web服务器发出请求。服务器发出请求。（2）Web服务器根据浏览器送来的请求，将请求的文档和服务器根据浏览器送来的请求，将请求的文档和所需资源返回给浏览器。所需资源返回给浏览器。（3）浏览器解析返回的文档，处理或显示从）浏览器解析返回的文档，处理或显示从W

2、eb服务器返服务器返回的资源文件。如果支持离线回的资源文件。如果支持离线Web应用，重点考察应用，重点考察manifest缓存文件，该文件由缓存文件，该文件由html标记的标记的manifest属属性指定。性指定。9.1离线Web应用2、离线、离线Web应用优点应用优点（1）离线浏览。用户可以在离线时继续使用）离线浏览。用户可以在离线时继续使用Web应用程序应用程序（2）提高用户）提高用户Web应用体验。将资源缓存到本地，资源加应用体验。将资源缓存到本地，资源加载速度更快，缩短载速度更快，缩短Web应用的响应时间。应用的响应时间。（3）减轻）减轻Web服务器的负载。浏览器只需要从服务器的负载。

3、浏览器只需要从Web服务器服务器下载更新过或更改过的资源。下载更新过或更改过的资源。使用应用缓存实现离线Web应用中，需要在HTML文档的标记中包含manifest属性，并在其中指明manifest文件，该文件的扩展名应为建议为”.appcache”或”.manifest”。manifest文件是一个文本文件，其中包含离线Web应用程序需要加载的文件列表。9.2 离线Web应用的实现HTML5离线离线Web应用的实现一是构造合理的应用的实现一是构造合理的manifest文件，从而实现资源缓存；二是检测在线状态并实现缓存更文件，从而实现资源缓存；二是检测在线状态并实现缓存更新。新。1、manif

4、est文件文件(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应用

5、的关键，文件清单内容的具体说明如下。应用的关键，文件清单内容的具体说明如下。manifest文件第一行必须是文件第一行必须是CACHE MANIFEST，文件扩展名建议使用，文件扩展名建议使用appcache，也可以使用，也可以使用manifest。CACHE：指定需要缓存的文件，清单中列出的文件在首次访问：指定需要缓存的文件，清单中列出的文件在首次访问Web服务器进服务器进下载并缓存。下载并缓存。NETWORK：指定的文件需要与服务器连接才能获取，不会被缓存。：指定的文件需要与服务器连接才能获取，不会被缓存。*是文是文件通配符，代表除了在件通配符，代表除了在CACHE中指明的文外件，所有其他

6、文件都不缓存，需要从中指明的文外件，所有其他文件都不缓存，需要从Web服务器获得。服务器获得。FALLBACK：在此选项下列出的文件当页面无法访问时，使用备用的资源文：在此选项下列出的文件当页面无法访问时，使用备用的资源文件。件。文件编码必须是文件编码必须是utf-8。实现应用缓存，需要在实现应用缓存，需要在标记中定义标记中定义manifest属性，从而在网页中引用属性，从而在网页中引用manifest文件，例如：文件，例如：9.2 离线Web应用的实现2、更新缓存更新缓存(1)用户更新缓存用户更新缓存 可以手动清空缓存，然后再在线访问可以手动清空缓存，然后再在线访问Web服务器，这时页服务器

7、，这时页面是会更新的。浏览器会在第一次访问面是会更新的。浏览器会在第一次访问Web应用程序时将应用程序时将manifest文件中指定的文件下载并保存在本地缓存中。文件中指定的文件下载并保存在本地缓存中。(2)调用调用Javascript接口更新缓存接口更新缓存 HTML5的的Application Cache API，除了可以实现离，除了可以实现离线资源缓存，也可以用其实现本地缓存更新。线资源缓存，也可以用其实现本地缓存更新。9.2 离线Web应用的实现示例示例9-3是更新缓存的一个典型示例。是更新缓存的一个典型示例。9.2 离线Web应用的实现3、检测在线状态检测在线状态 除了将服务器的资源

8、缓存在本地外，离线除了将服务器的资源缓存在本地外，离线Web应用还应该应用还应该能够在离线时将要提交给服务器的数据保存在本地，等在线能够在离线时将要提交给服务器的数据保存在本地，等在线时再将其同步到服务器。时再将其同步到服务器。9.3 Web Storage概述1、Web Storage的概念的概念 在在Web应用中，有时会希望由应用中，有时会希望由Web页面来记录或处理页面来记录或处理一些信息，例如用户登录状态、计数器或者用户需要和页面一些信息，例如用户登录状态、计数器或者用户需要和页面频繁交互的数据等。这时，可以不使用后台数据库，而是使频繁交互的数据等。这时，可以不使用后台数据库，而是使用

9、用Web Storage技术将数据存储在客户端浏览器中。技术将数据存储在客户端浏览器中。Web Storage提供两种方式将数据保存在客户端：一提供两种方式将数据保存在客户端：一种是种是localStorage，另一种是，另一种是sessionStorage。l localStorage被称做本地存储，将数据保存在客户端本被称做本地存储，将数据保存在客户端本地；地；l sessionStorage被称为会话存储，将数据保存在被称为会话存储，将数据保存在session中，浏览器关闭后中，浏览器关闭后session对象消失。对象消失。9.3 Web Storage概述1、Web Storage的概

10、念的概念表表9-1 localStorag和和sessionStorage的区别的区别Web Storage类型类型数据保存周期数据保存周期有效范围有效范围localStorage数据保存在本地存储数据保存在本地存储（硬盘），网页关闭后，（硬盘），网页关闭后，数据仍然存在，执行删数据仍然存在，执行删除命令后数据会消失。除命令后数据会消失。同一网站的网页可同一网站的网页可以访问以访问sessionStorage数据临时保存在数据临时保存在session对象中，在网页浏览期对象中，在网页浏览期间存续，网页关闭，数间存续，网页关闭，数据丢失据丢失仅对当前浏网页可仅对当前浏网页可以访问以访问9.3 W

11、eb Storage概述2、Web Storage API、Web Storage的概念的概念 在使用了在使用了localStorage或或sessionStorage对象的文档对象的文档中，用户可以通过中，用户可以通过window对象来获取它们。除了数据的保对象来获取它们。除了数据的保存周期和有效范围外，不管是存周期和有效范围外，不管是sessionStorage，还是，还是localStorage，可使用的，可使用的API都相同，其功能包括保存数都相同，其功能包括保存数据、读取数据、删除数据、得到索引的据、读取数据、删除数据、得到索引的key值等值等。9.3 Web Storage概述2、

12、Web Storage API、Web Storage的概念的概念v保存数据的保存数据的setItem()方法方法 localStorage 和sessionStorage都使用setItem()方法用来保存数据，语法格式如下：localStorage.setItem(key,value)v读取数据的读取数据的getItem()方法方法 localStorage和sessionStoragey使用getItem()方法用来读取数据，语法格式如下：var value=localStorage.getItem(key);9.3 Web Storage概述2、Web Storage API、Web

13、Storage的概念的概念v删除数据删除数据删除数据分为删除单个数据和删除所有数据两种。删除数据分为删除单个数据和删除所有数据两种。删除单个数据时，需要指明删除的删除单个数据时，需要指明删除的key值，形式如下值，形式如下localStorage.removeItem(key);删除所有数据使用删除所有数据使用clear()方法，它能删除存储列表中的所有方法，它能删除存储列表中的所有数据。语法格式如下：数据。语法格式如下：localStorage.clear();9.3 Web Storage概述2、Web Storage API、Web Storage的概念的概念vlength属性属性len

14、gth属性表示目前Storage对象中存储的键值对的数量，length属性主要用来遍历localStorage或sessionStoragey中的所有对象。v返回索引的返回索引的key值值 遍历Storage对象时，需要使用key(index)方法允许获取一个指定位置的键值。语法格式如下。localStorage.key(index);9.4 Web Storage应用1 使用使用localStorage和和sessionStorage的网页的网页计数器计数器示例示例9-5实现一个简单的网页计数器实现一个简单的网页计数器9.4 Web Storage应用2使用使用localStorage保存、

15、读取和清除数据保存、读取和清除数据示例示例9-6使用了使用了localStorage对象的各种方法对象的各种方法9.4 Web Storage应用3 使用使用localStorage实现电话簿管理实现电话簿管理示例示例9-7使用使用localStorage对象实现了电话簿的增对象实现了电话簿的增加、查找和显示功能加、查找和显示功能9.4 Web Storage应用3 4 使用使用JSON对象改进电话簿的功能对象改进电话簿的功能示例示例9-7只实现了姓名和手机号码只实现了姓名和手机号码2个字段的管理，个字段的管理，如果要保存更为丰富的电话簿信息，比如公司、地址如果要保存更为丰富的电话簿信息，比如

16、公司、地址等，如何实现呢？等，如何实现呢？Web Storage可以利用可以利用JSON的的stringify()方法，将复杂对象转变成字符串，存方法，将复杂对象转变成字符串，存入入Web Storage中；当从中；当从Web Storage中读取中读取时，可以通过时，可以通过JSON的的parse()方法再转换成方法再转换成JSON对象。对象。示例示例9-8的一些改进的一些改进：作业（2）构建一个包含图片、音频、文字和样式的离线Web应用，并在Chrome浏览器中进行测试，观察Web缓存的文件。（3）参考使用localStorage实现的电话簿程序，使用localStorage创建一个留言本，实现增加、查找和显示功能，如图9-8所示。