《第8章---HTML-5本地存储ppt课件(全)》由会员分享,可在线阅读,更多相关《第8章---HTML-5本地存储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 = openDatabas
8、e(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本章小本章小结