第8章---HTML-5本地存储ppt课件(全).ppt

《第8章---HTML-5本地存储ppt课件(全).ppt》由会员分享，可在线阅读，更多相关《第8章---HTML-5本地存储ppt课件(全).ppt（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、使用HTML5的Web Storage功能，可以在客户端存储更多的数据，而且可以实现数据在多个页面中共享甚至是同步。cookie存储数据的存储数据的不足不足cookie可用于在程序间传递少量的数据，对于Web应用来说，它是一个在服务器和客户端之间来回传送文本值的内置机制，服务器可以根据cookie来追踪用户在不同页面的访问信息。正因其卓越的表现，在目前的Web应用中，cookie得到了最为广泛的应用。使用使用Web Storage存储的优势存储的优势Web Storage可以在客户端保存大量的数据，而且通过其提供的接口，访问数据也非常方便。然而，Web Storage的诞生并不是为了替代coo

2、kie，相反，是为了弥补cookie在本地存储中表现的不足。本地存储（本地存储（localStorage）与会话存储（）与会话存储（sessionStorage）的区别）的区别Web Storage本地存储包括sessionStorage（会话存储）和localStorage（本地存储。）熟悉Web编程的人员第一次接触Web Storage时，会很自然地与session和cookie去对应。不同的是，cookie和session完全是服务器端可以操作的数据，但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。检查浏览器是否支持检查浏览器是否支持Web St

3、orage在HTML5的各项特性中，Web Storage的浏览器支持度是比较好的。目前，所有的主流浏览器都在一定程度上支持Web Storage。因而，Web Storage成为Web应用中最安全的API之一。实战练习实战练习检查浏览器是否支持检查浏览器是否支持Web Storage设置和获取设置和获取Storage数据数据sessionStorage和localStorage作为window的属性，完全继承Storage API，它们提供的操作数据的方法完全相同。实战练习实战练习使用使用sessionStorage和和localStorage8.2使用使用Web Storage了解了有关W

4、eb Storage的相关知识，接下来将向读者介绍如何设置和获取Storage数据、Web Storage的属性、方法和事件等相关知识。最终文件：光盘最终文件第8章8-2-1.html视频：光盘视频第8章8-2-1.swf最终文件：光盘最终文件第8章8-2-2.html视频：光盘视频第8章8-2-2.swfStorage API的属性和方法的属性和方法在上节中学习了如何使用setItem()方法存储数据，使用getItem()方法获取数据。这些方法都来源于它们所继承的Storage API提供的方法。实战练习实战练习使用使用Storage对象保存对象保存页面内容页面内容存储存储JSON对象的数

5、据对象的数据虽然使用Web Storage可以保持任意的“键/值”对数据，但是一些浏览器把数据限定为字符串类型，而且对于一些复杂结构的数据，管理起来比较混乱。不过对于复杂结构的数据，可以使用现代浏览器都支持的JSON对象来处理，这也为开发人员提供了一种可行的解决方案。实战练习实战练习使用使用Storage对象存储对象存储JOSN数据数据最终文件：光盘最终文件第8章8-2-3.html视频：光盘视频第8章8-2-3.swf最终文件：光盘最终文件第8章8-2-4.html视频：光盘视频第8章8-2-4.swfStorage API的事件的事件有时候，会存在多个网页或标签页同时访问存储数据的情况。为

6、保证修改的数据能够及时反馈到另一个页面，HTML 5的Web Storage内建立一套事件通知机制，会在数据更新时触发。无论监听的窗口是否存储过该数据，只要与执行存储的窗口是同源的，都会触发Web Storage事件。8.3本地数据本地数据库Web SQL为了进一步加强客户端的存储能力，HTML 5引入了本地数据库的概念。但HTML 5的数据库API的具体细节仍在完善，其中Web SQL Database就是数据库方案之一。实际上，Web SQL Database并不包含在HTML 5规范之中，它是一个独立的规范，引入了使用SQL操作客户端数据库的API。最新版本的Chrome、Safari和

7、Opera浏览器都已经实现了它。了解了解Web SQL数据库数据库Web SQL Database的规范使用的是SQLite数据库，它允许应用程序通过一个异步的JavaScript接口访问数据库。虽然Web SQL 不属于HTML 5规范，而且HTML 5最终也不会选择它，但是对于移动领域是非常有用的，因为在任何情况下，SQL API在数据库中的数据处理能力都是无法比拟的。Web SQL数据库的基本数据库的基本操作操作u打开数据库openDatabase()方法可以打开一个已经存在的数据库，如果数据库不存在，它可以创建数据库。创建并打开数据库的语法如下。var db=openDatabase(

8、TestDB,1.0,测试数据库,2*1024*1024,creation Callback);u创建数据表transaction()方法可以进行事务处理；executeSql()方法可以执行SQL语句。可以同时使用这两个方法，在事务中处理SQL语句。创建数据表的方法如下。db.transaction(function(tx)tx.executeSql(CREATE TABLE IF NOT EXISTS UserName(id unique,Name););u添加数据至数据库表与创建数据表一样，也可以使用transaction()方法和executeSql()方法，仅仅是SQL语句不同。使用插入数据的SQL语句执行数据的插入操作。u读取数据库中的数据仍然使用transaction()方法和executeSql()方法，使用查询SQL语句，并在executeSql()方法中添加匿名的回调处理函数。本章主要向读者介绍了HTML 5中的本地存储功能，包括HTML 5的Web Storage和Web SQL数据库。其中重点介绍了Web Storage接口的方法和事件，另外还介绍了JSON对象，以扩展Storage对象存储的复杂性。完成本章内容的学习，读者需要掌握Web Storage本地存储的基本使用方法，并对Web SQL数据库有一定的了解。8.4本章小本章小结