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

8.1　本地存储Web Storage;　检查浏览器是否支持Web Storage 在HTML5的各项特性中，Web Storage的浏览器支持度是比较好的。目前，所有的主流浏览器都在一定程度上支持Web Storage。因而，Web Storage成为Web应用中最安全的API之一。 实战练习——检查浏览器是否支持Web Storage 　设置和获取Storage数据 sessionStorage和localStorage作为window的属性，完全继承Storage API，它们提供的操作数据的方法完全相同。 实战练习——使用sessionStorage和localStorage;　Storage API的属性和方法 在上节中学习了如何使用setItem()方法存储数据，使用getItem()方法获取数据。这些方法都来源于它们所继承的Storage API提供的方法。 实战练习——使用Storage对象保存页面内容 　存储JSON对象的数据 虽然使用Web Storage可以保持任意的“键/值”对数据，但是一些浏览器把数据限定为字符串类型，而且对于一些复杂结构的数据，管理起来比较混乱。 不过对于复杂结构的数据，可以使用现代浏览器都支持的JSON对象来处理，这也为开发人员提供了一种可行的解决方案。 实战练习——使用Storage对象存储JOSN数据;;　Web SQL数据库的基本操作 打开数据库 openDatabase()方法可以打开一个已经存在的数据库，如果数据库不存在，它可以创建数据库。创建并打开数据库的语法如下。 var db = openDatabase(TestDB,1.0,测试数据库,2*1024*1024, creation Callback); 创建数据表 transaction()方法可以进行事务处理；executeSql()方法可以执行SQL语句。可以同时使用这两个方法，在事务中处理SQL语句。创建数据表的方法如下。 db.transaction(function (tx){ tx.executeSql(CREATE TABLE IF NOT EXISTS UserName(id unique,Name)); }); 添加数据至数据库表 与创建数据表一样，也可以使用transaction()方法和executeSql()方法，仅仅是SQL语句不同。使用插入数据的SQL语句执行数据的插入操作。 读取数据库中的数据 仍然使用transaction()方法和executeSql()方法，使用查询SQL语句，并在executeSql()方法中添加匿名的回调处理函数。;本章主要向读者介绍了HTML 5中的本地存储功能，包括HTML 5的Web Storage和Web SQL数据库。其中重点介绍了Web Storage接口的方法和事件，另外还介绍了JSON对象，以扩展Storage对象存??的复杂性。完成本章内容的学习，读者需要掌握Web Storage本地存储的基本使用方法，并对Web SQL数据库有一定的了解。 8.1　本地存储Web Storage;　检查浏览器是否支持Web Storage 在HTML5的各项特性中，Web Storage的浏览器支持度是比较好的。目前，所有的主流浏览器都在一定程度上支持Web Storage。因而，Web Storage成为Web应用中最安全的API之一。 实战练习——检查浏览器是否支持Web Storage 　设置和获取Storage数据 sessionStorage和localStorage作为window的属性，完全继承Storage API，它们提供的操作数据的方法完全相同。 实战练习——使用sessionStorage和localStorage;　Storage API的属性和方法 在上节中学习了如何使用setItem()方法存储数据，使用getItem()方法获取数据。这些方法都来源于它们所继承的Storage API提供的方法。 实战练习——使用Storage对象保存页面内容 　存储JSON对象的数据 虽然使用Web Storage可以保持任意的“键/值”对数据，但是一些浏览器把数据限定为字符串类型，而且对于一些复杂结构的数据，管理起来比较混乱。 不过对于复杂结构的数据，可以使用现代浏览器都支持的JSON对象来处理，这也为开发人员提供了一种可行的解决方案。 实战练习——使用Storage对象存储JOSN数据;;　Web SQL数据库的基本操作 打开数据库 openDatabase()方法可以打开一个已经存在的数据库，如果数据库不存在，它可以创建数据库。创建并打开数据库的语法如下。 var db = openDatabase(TestDB,1.0,测试