第9讲数据库WebSQL课件

《第9讲数据库WebSQL课件》由会员分享，可在线阅读，更多相关《第9讲数据库WebSQL课件（107页珍藏版）》请在金锄头文库上搜索。

1、第第9讲讲 数据库数据库Web SQL传统传统WebWeb应用程序将大多数据都存储在应用程序将大多数据都存储在WebWeb服务服务器端的数据库中，本地存储的能力很弱。器端的数据库中，本地存储的能力很弱。而频繁地访问数据库服务器获取数据，不但会而频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率。增加网络流量，而且影响应用程序的效率。HTML5HTML5的本地存储能力得到了很大的提高，不但的本地存储能力得到了很大的提高，不但可以像传统可以像传统WebWeb应用程序那样将数据存储在文件应用程序那样将数据存储在文件中，而且还支持本地的轻型数据库。中，而且还支持本地的轻型数据库

2、。 本章知识点本章知识点1 1 webSQLwebSQL Database API Database API 2 2 IndexedDBIndexedDB 1 webSQL Database API p1 1 判断浏览器是否支持判断浏览器是否支持webSQLwebSQL Database API Database API p2 2 新建数据库新建数据库 p3 3 执行执行SQLSQL语句语句 1 判断浏览器是否支持判断浏览器是否支持webSQL Database API p使用使用windows. windows. openDatabaseopenDatabase属性可以打开本数据库，属性可以

3、打开本数据库，并返回连接句柄。如果该句柄为并返回连接句柄。如果该句柄为nullnull、undefinedundefined则则说明不支持使用说明不支持使用webSQLwebSQL Database API Database API操作本地数据操作本地数据库，反之则支持。下面定义一个库，反之则支持。下面定义一个openDatabaseopenDatabase()()函函数，用于打开本地数据库：数，用于打开本地数据库：function getOpenDatabase() try /如果支持则返回数据库连接句柄 if(!window.openDatabase) return window.open

4、Database; else return undefined; catch (e) return undefined; 【例例 9】 p在网页中定义一个按钮，单击此按钮时，会检测浏览在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持器是否支持webSQLwebSQL Database API Database API。定义按钮的代码。定义按钮的代码如下：如下：检测浏览器是否支持检测浏览器是否支持webSQLDatabaseAPI【例例 9】 p单击按钮单击按钮checkcheck将调用将调用check()check()函数。函数。check()check()函数的函数的定义代码如下：定

5、义代码如下：functioncheck()if(getOpenDatabase()=undefined)alert(您的浏览器不支持您的浏览器不支持webSQLDatabaseAPI。)elsealert(您的浏览器支持您的浏览器支持webSQLDatabaseAPI。)2 新建数据库新建数据库 pwebSQLwebSQL Database API Database API在中并不包括专门用在中并不包括专门用于创建数据库的于创建数据库的APIAPI，但是以指定的数据库，但是以指定的数据库名为参数调用名为参数调用openDatabaseopenDatabase()()函数时，如果函数时，如果自定

6、的数据库名不存在，则会自动创建它。自定的数据库名不存在，则会自动创建它。p带参数的带参数的openDatabaseopenDatabase()()函数的语法如下：函数的语法如下：数据库连接句柄数据库连接句柄=openDatabase(数据数据库名库名,版本号版本号,数据库显示名称数据库显示名称,估计容量估计容量)【例例 10】 p创建数据库创建数据库mydatabasemydatabase的代码如下：的代码如下：functioncreateDB()if(window.openDatabase=undefined)alert(您的浏览器不支持您的浏览器不支持webSQLDatabaseAPI。)

7、elsevardbs=window.openDatabase(mydatabase,v1.0,SavedataDB,100)if(dbs)alert(创建成功。创建成功。)elsealert(打开数据库失败。打开数据库失败。)3 执行执行SQL语句语句 p使用使用transaction()transaction()函数可以执行函数可以执行SQLSQL语句，语法如语句，语法如下：下：数据库连接句柄数据库连接句柄.transaction(function(tx)tx.executeSql(CREATETABLEIFNOTEXISTSLOGS(idunique,log)ptransaction()t

8、ransaction()函数的参数是一个回调函数，使用回函数的参数是一个回调函数，使用回调函数的参数调函数的参数txtx来调用来调用executeSqlexecuteSql()()函数可以执行函数可以执行SQLSQL语句。下面分别介绍几个常用的语句。下面分别介绍几个常用的SQLSQL语句。语句。1创建表语句创建表语句CREATE TABLE p表是数据库中最重要的逻辑对象，是存储数据表是数据库中最重要的逻辑对象，是存储数据的主要对象。在设计数据库结构时，很重要的的主要对象。在设计数据库结构时，很重要的工作就是设计表的结构。关系型数据库的表由工作就是设计表的结构。关系型数据库的表由行和列组成。行

9、和列组成。CREATE TABLE语句用于创建表语句用于创建表 CREATETABLEIFNOTEXISTS表名表名(列名列名1数据类型数据类型字段属性字段属性,列名列名2数据类型数据类型字段属性字段属性,列名列名n数据类型数据类型字段属性字段属性)【例例 11】 functioncreateTable()if(window.openDatabase=undefined)alert(您的浏览器不支持您的浏览器不支持webSQLDatabaseAPI。)elsevardbs=window.openDatabase(mydatabase,v1.0,SavedataDB,100)if(dbs)dbs

10、.transaction(function(tx)tx.executeSql(CREATETABLEIFNOTEXISTSt(idUNIQUE,name)elsealert(打开数据库失败。打开数据库失败。)DROP TABLE语句语句 p可以使用可以使用DROP TABLEDROP TABLE语句删除表，语法如语句删除表，语法如下：下：DROPTABLE表名表名p在在WebSQLWebSQL中执行中执行DROP TABLEDROP TABLE语句的方法与语句的方法与执行执行CREATE TABLECREATE TABLE语句的方法相似。语句的方法相似。2插入数据表语句插入数据表语句INSER

11、T pINSERTINSERT语句用于向表中插入数据，基本使语句用于向表中插入数据，基本使用方法如下：用方法如下：INSERTINTO表名表名(列名列名1,列名列名2,列名列名n)VALUES(值值1,值值2,值值n)【例例 12】 functioninsert()if(window.openDatabase=undefined)alert(您的浏览器不支持您的浏览器不支持webSQLDatabaseAPI。)elsevardbs=window.openDatabase(mydatabase,v1.0,SavedataDB,100)if(dbs)dbs.transaction(function

12、(tx)tx.executeSql(INSERTINTOt(id,name)VALUES(1,lee)elsealert(打开数据库失败。打开数据库失败。)UPDATE语句语句 p可以通过可以通过UPDATEUPDATE语句修改表中的数据。语句修改表中的数据。UPDATEUPDATE语句的基本使用方法如下所示：语句的基本使用方法如下所示：UPDATE表名表名SET列名列名1=值值1,列名列名2=值值2,列名列名n=值值nWHERE更新条件表达式更新条件表达式DELETE语句语句 DELETEFROM表名表名WHERE删除条件删除条件表达式表达式3查询数据表语句查询数据表语句SELECT SEL

13、ECT子句子句FROM子句子句WHERE子句子句各子句的主要功能说明如下。各子句的主要功能说明如下。 SELECTSELECT子句：指定查询结果集的列组成，列表子句：指定查询结果集的列组成，列表中的列可以来自一个或多个表；中的列可以来自一个或多个表； FROMFROM子句：指定要查询的一个或多个表；子句：指定要查询的一个或多个表； WHEREWHERE子句：指定查询的条件；子句：指定查询的条件；transaction()函数函数 p使用使用transaction()transaction()函数执行函数执行SELECTSELECT语句语句的语法如下：的语法如下：db.transaction(f

14、unction(t)t.executeSql(SELECT语句语句,function(t,r),function(t,e)t.executeSql()函数有函数有4个参数个参数 p第一个参数是要执行的第一个参数是要执行的SELECTSELECT语句；语句；p第第2 2个参数是要传递的参数，比如查询条个参数是要传递的参数，比如查询条件，如果没有参数，则使用件，如果没有参数，则使用；p第第3 3个参数是处理查询结果集的回调函数，个参数是处理查询结果集的回调函数，参数参数r r为结果集；为结果集；p第第4 4个参数是处理错误的回调函数，参数个参数是处理错误的回调函数，参数e e为错误对象。为错误对象

15、。 【例例 13】 functionselect()if(window.openDatabase=undefined)alert(您的浏览器不支持您的浏览器不支持webSQLDatabaseAPI。)elsevardbs=window.openDatabase(mydatabase,v1.0,SavedataDB,100)if(dbs)dbs.transaction(function(tx)tx.executeSql(SELECT*FROMt,function(tx,results)alert(results.rows.length)if(results&results.rows&0resul

16、ts.rows.length)vartext=接上接上for(vari=0iresults.rows.lengthi+)text+=results.rows.item(i).id+results.rows.item(i).name+document.getElementById(result).innerHTML=text,null)elsealert(打开数据库失败。打开数据库失败。)定义一个定义一个“查询表查询表t”按钮按钮 查询表查询表t定义一个定义一个标签，用于显示查询结果标签，用于显示查询结果 显示表显示表t的内容的内容 总结总结p我们在数据库中处理大量结构化数据，我们在数据库中处理

17、大量结构化数据，html5html5引入引入Web SQL DatabaseWeb SQL Database概念。概念。p它使用它使用 SQL SQL 来操纵客户端数据库的来操纵客户端数据库的 API API，这些，这些 API API 是异步的，规范中使用的方是异步的，规范中使用的方言是言是SQLliteSQLlite。p悲剧正是产生于此，悲剧正是产生于此，Web SQL DatabaseWeb SQL Database规规范页面有着这样的声明。范页面有着这样的声明。p翻译一下：翻译一下：Web SQL DatabaseWeb SQL Database曾经在曾经在W3CW3C推荐规范上，推荐

18、规范上，但规范工作已经停止了。但规范工作已经停止了。p目前已经陷入了一个僵局：目前的所有实现都是基目前已经陷入了一个僵局：目前的所有实现都是基于同一个于同一个SQLSQL后端（后端（SQLiteSQLite），但是我们需要更多的），但是我们需要更多的独立实现来完成标准化。独立实现来完成标准化。p也就是说这是一个废弃的标准了，虽然部分浏览器也就是说这是一个废弃的标准了，虽然部分浏览器已经实现，但。已经实现，但。p但是我们学一下也没什么坏处，而且能和现在但是我们学一下也没什么坏处，而且能和现在W3CW3C力推的力推的IndexedDBIndexedDB做比较。做比较。p不过不过ChromeChro

19、me的控制台真心好用啊，神马的控制台真心好用啊，神马cookiecookie、Local StorageLocal Storage、Session StorageSession Storage、Web Web SQLSQL、IndexedDBIndexedDB、Application CacheApplication Cache等等html5html5新增内容看的一清二楚，免去了很多调试代码新增内容看的一清二楚，免去了很多调试代码工作。工作。pWeb SQL DatabaseWeb SQL Database实际上已经被废弃，而实际上已经被废弃，而HTML5HTML5的支持的本地存储实际上变成了

20、的支持的本地存储实际上变成了Web Web StorageStorage（Local StorageLocal Storage和和Session StorageSession Storage）与与IndexedDBIndexedDB。pWeb StorageWeb Storage使用简单字符串键值对在本地存储使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存数据，方便灵活，但是对于大量结构化数据存储力不从心。储力不从心。pIndexedDBIndexedDB是为了能够在客户端存储大量的结构是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的化数据，并且使用索引高效

21、检索的APIAPI。2 IndexedDB p1 1 数据库的相关概念数据库的相关概念 p2 2 判断浏览器是否支持判断浏览器是否支持IndexedDBIndexedDB p3 3 创建和打开数据库创建和打开数据库 p4 4 创建对象存储空间创建对象存储空间ObjectStoreObjectStore p5 5 创建索引创建索引 p6 6 事务事务 p7 7 游标游标 1 数据库的相关概念数据库的相关概念 p1 1数据库数据库 p2 2数据库管理系统数据库管理系统 p3 3数据库系统数据库系统 p4 4NoSQLNoSQL数据库数据库 1数据库数据库 p数据库（数据库（DatabaseData

22、base，DBDB），简单地讲就是），简单地讲就是存放数据的仓库。不过，数据库不是数据存放数据的仓库。不过，数据库不是数据的简单堆积，而是以一定的方式保存在计的简单堆积，而是以一定的方式保存在计算机存储设备上的相互关联的数据的集合。算机存储设备上的相互关联的数据的集合。也就是说，数据库中的数据并不是相互孤也就是说，数据库中的数据并不是相互孤立的，数据和数据之间是有关联的。立的，数据和数据之间是有关联的。2数据库管理系统数据库管理系统 p数据库管理系统（数据库管理系统（Database Management Database Management SystemSystem，DBMSDBMS）是一

23、种系统软件，介于应）是一种系统软件，介于应用程序和操作系统之间，用于帮助我们管用程序和操作系统之间，用于帮助我们管理输入到计算机中的大量数据。如用于创理输入到计算机中的大量数据。如用于创建数据库，向数据库中存储数据，修改数建数据库，向数据库中存储数据，修改数据库中的数据，从数据库中提取信息等。据库中的数据，从数据库中提取信息等。 一个数据库管理系统应具备如下功能一个数据库管理系统应具备如下功能 p（1 1）数据定义功能。可以定义数据库的结构，定义数）数据定义功能。可以定义数据库的结构，定义数据库中数据之间的联系，定义对数据库中数据的各种约据库中数据之间的联系，定义对数据库中数据的各种约束等。束

24、等。p（2 2）数据操纵功能：可以实现对数据库中数据的添加、）数据操纵功能：可以实现对数据库中数据的添加、删除、修改，可以对数据库进行备份和恢复等。删除、修改，可以对数据库进行备份和恢复等。p（3 3）数据查询功能：可以以各种方式提供灵活的查询）数据查询功能：可以以各种方式提供灵活的查询功能，使用户可以方便地使用数据库中的数据。功能，使用户可以方便地使用数据库中的数据。p（4 4）数据控制功能：可以完成对数据库中数据的安全）数据控制功能：可以完成对数据库中数据的安全性控制、完整性控制、多用户环境下的并发控制等多方性控制、完整性控制、多用户环境下的并发控制等多方面的控制。面的控制。p（5 5）数

25、据库通信功能：在分布式数据库或提供网络操）数据库通信功能：在分布式数据库或提供网络操作功能的数据库中还必须提供数据库的通信功能。作功能的数据库中还必须提供数据库的通信功能。数据库管理系统在计算机系统中的地位数据库管理系统在计算机系统中的地位 3数据库系统数据库系统 p数据库系统（数据库系统（Database SystemDatabase System，DBSDBS）是）是指在计算机系统中引入数据库的系统，除指在计算机系统中引入数据库的系统，除了相关的硬件之外，数据库系统还包括数了相关的硬件之外，数据库系统还包括数据库、数据库管理系统、应用系统、数据据库、数据库管理系统、应用系统、数据库管理员和

26、用户。库管理员和用户。p可以看出，数据库、数据库管理系统和数可以看出，数据库、数据库管理系统和数据库系统是据库系统是3 3个不同的概念，数据库强调个不同的概念，数据库强调的是数据，数据库管理系统是系统软件，的是数据，数据库管理系统是系统软件，而数据库系统强调的是系统。而数据库系统强调的是系统。4NoSQL数据库数据库 pNoSQLNoSQL是新一代的数据库，是新一代的数据库，NoSQLNoSQL有有non-relationalnon-relational和和Not Only SQLNot Only SQL的意思，具有非关系型、高效、分布式、的意思，具有非关系型、高效、分布式、开放源代码等特点。

27、对于已经熟悉开放源代码等特点。对于已经熟悉SQL ServerSQL Server等关系等关系型数据库的读者而言，接受型数据库的读者而言，接受NoSQLNoSQL数据库还需要有一数据库还需要有一个过程。个过程。Nam为什么要提出为什么要提出NoSQL的概念呢？的概念呢？p因为传统的关系数据库在应付因为传统的关系数据库在应付web2.0web2.0网站，特别是超大网站，特别是超大规模和高并发的规模和高并发的SNSSNS类型（社交网络）的类型（社交网络）的web2.0web2.0纯动态网纯动态网站已经显得力不从心，暴露了很多难以克服的问题。站已经显得力不从心，暴露了很多难以克服的问题。p例如，对数

28、据库高并发读写的需求、对海量数据的高效例如，对数据库高并发读写的需求、对海量数据的高效率存储和访问的需求、对数据库的高可扩展性和高可用率存储和访问的需求、对数据库的高可扩展性和高可用性的需求等。性的需求等。p所以，关系数据库在很多情况下显得不太合适了。所以，关系数据库在很多情况下显得不太合适了。NoSQLNoSQL 是非关系型数据存储的广义定义，它打破了关系型数据是非关系型数据存储的广义定义，它打破了关系型数据库的垄断局面。库的垄断局面。NoSQLNoSQL 数据存储不需要固定的表结构，数据存储不需要固定的表结构，通常也不存在连接操作。通常也不存在连接操作。p在大数据存取上具备关系型数据库无法

29、比拟的性能优势。在大数据存取上具备关系型数据库无法比拟的性能优势。NoSQLNoSQL的概念在的概念在 20092009年初得到了广泛认同。年初得到了广泛认同。2 判断浏览器是否支持判断浏览器是否支持IndexedDB p使用使用window.indexedDBwindow.indexedDB属性可以判断浏览器是否支持属性可以判断浏览器是否支持IndexedDBIndexedDB数据库。数据库。p当前，当前，IndexedDBIndexedDB的规范尚未最终定稿，不同的浏览的规范尚未最终定稿，不同的浏览器厂商还是使用浏览器前缀实现器厂商还是使用浏览器前缀实现IndexedDBIndexedDB

30、 API API。基。基于于GeckoGecko内核的浏览器使用内核的浏览器使用mozmoz前缀，基于前缀，基于WebKitWebKit内核内核的浏览器使用的浏览器使用webkitwebkit前缀。前缀。p如果还希望使用如果还希望使用window.indexedDBwindow.indexedDB来判断浏览器是否来判断浏览器是否支持支持IndexedDBIndexedDB数据库，则可以做下面的处理：数据库，则可以做下面的处理：window.indexedDB=window.indexedDB|window.mozIndexedDB|window.webkitIndexedDB【例例 14】 p

31、在网页中定义一个按钮，单击此按钮时，在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持会检测浏览器是否支持IndexedDBIndexedDB数据库。数据库。定义按钮的代码如下：定义按钮的代码如下：检测浏览器是否支持检测浏览器是否支持IndexedDB数据库数据库check()函数函数 functioncheck()window.indexedDB=window.indexedDB|window.mozIndexedDB|window.webkitIndexedDBif(window.indexedDB)alert(您的浏览器支持您的浏览器支持IndexedDB数据库。数据库。)else

32、alert(您的浏览器不支持您的浏览器不支持IndexedDB数据库。数据库。)3 创建和打开数据库创建和打开数据库 pwindow.indexedDBwindow.indexedDB对象只有一个对象只有一个openopen方法，用于方法，用于打开指定的数据库，语法如下：打开指定的数据库，语法如下：request对象对象=window.indexedDB.open(数据库名数据库名,数据库版本号数据库版本号)p如果指定的数据库名存在，则打开它；否则创建如果指定的数据库名存在，则打开它；否则创建数据库。数据库。requestrequest对象用于处理用户对数据库的操对象用于处理用户对数据库的操作

33、请求。可以通过它定义操作成功和失败的处理作请求。可以通过它定义操作成功和失败的处理函数。函数。request.onerror p通过通过request.onerrorrequest.onerror可以指定操作失败的可以指定操作失败的处理函数，方法如下：处理函数，方法如下：request.onerror=function(event)/错误处理错误处理p可以通过可以通过event.target.errorCodeevent.target.errorCode获取错获取错误号。误号。 提示提示 p浏览器通常不希望恶意网站随意使用浏览器通常不希望恶意网站随意使用IndexedDBIndexedDB数据

34、库来存储数据，因此当数据库来存储数据，因此当WebWeb应应用程序第一次使用用程序第一次使用IndexedDBIndexedDB数据库时会询问数据库时会询问用户是否允许访问。用户是否允许访问。p而且多数浏览器在隐私模式下不允许使用而且多数浏览器在隐私模式下不允许使用IndexedDBIndexedDB数据库。数据库。 request.onsuccess p通过通过request.onsuccessrequest.onsuccess可以指定操作成功的处可以指定操作成功的处理函数，方法如下：理函数，方法如下：request.onerror=function(event)/成功处理成功处理prequ

35、est.resultrequest.result是执行指定操作的结果，例如，是执行指定操作的结果，例如，执行打开数据库的操作后，通过执行打开数据库的操作后，通过request.resultrequest.result可以获得打开数据库的实例。可以获得打开数据库的实例。通过数据库实例可以访问数据库。通过数据库实例可以访问数据库。 创建创建IndexedDB数据库数据库MyTestDatabase vardbvarrequest=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+event.tar

36、get.errorCode)request.onsuccess=function(event)db=request.result4 创建对象存储空间创建对象存储空间ObjectStore pIndexedDBIndexedDB不是关系型数据库，它使用对象存储空间不是关系型数据库，它使用对象存储空间（ObjectStoreObjectStore）来存储数据。一个数据库中可以包）来存储数据。一个数据库中可以包含多个对象存储空间，对象存储空间使用键值对的含多个对象存储空间，对象存储空间使用键值对的形式来存储数据，即每个数据都由一组键和一组值形式来存储数据，即每个数据都由一组键和一组值组成键类似关系型

37、数据库中表的字段。例如下面的组成键类似关系型数据库中表的字段。例如下面的代码表示一条员工数据：代码表示一条员工数据： id:110,name:李明李明,age:35,email:IndexedDB数据库提供键的选项数据库提供键的选项 key Path选项选项key Generator选项选项具体描述具体描述否否否否这种对象存储空间可存储任意类型的值。当保存这种对象存储空间可存储任意类型的值。当保存新值时，必须提供一个单独的键新值时，必须提供一个单独的键是是否否这种对象存储空间只能存储这种对象存储空间只能存储JavaScript对象。而且对象。而且JavaScript对象必须具有一个与对象必须具

38、有一个与key Path同名的同名的属性属性否否是是这种对象存储空间可存储任意类型的值。当保存这种对象存储空间可存储任意类型的值。当保存新值时，可以自动生成键；如果需要指定特定新值时，可以自动生成键；如果需要指定特定的键，也可以提供一个单独的键的键，也可以提供一个单独的键是是是是这种对象存储空间只能存储这种对象存储空间只能存储JavaScript对象。而且对象。而且JavaScript对象必须具有一个与对象必须具有一个与key Path同名的同名的属性。当保存新值时，可以自动生成键。生成属性。当保存新值时，可以自动生成键。生成的键被保存在的键被保存在JavaScript对象的与对象的与key

39、Path同名同名的属性中；如果与的属性中；如果与key Path同名的属性已经有同名的属性已经有值值1，则会将其作为键，不会再生成新键，则会将其作为键，不会再生成新键createObjectStore()方法方法 p使用数据库实例对象的使用数据库实例对象的createObjectStorecreateObjectStore()()方法可以创方法可以创建对象存储空间，方法如下：建对象存储空间，方法如下：pObjectStoreObjectStore对象对象 = = 数据库实例对象数据库实例对象. .createObjectStorecreateObjectStore( (对象存储空间名对象存储空

40、间名, , 提供键的选项提供键的选项) )p例如，创建一个对象存储空间例如，创建一个对象存储空间employeesemployees，指定，指定keyPathkeyPath选项为选项为idid（即主键为（即主键为idid），代码如下：），代码如下：varobjectStore=db.createObjectStore(employees,keyPath:id)createObjectStore()方法方法 p数据库实例对象数据库实例对象. .objectStoreNamesobjectStoreNames中包含数据库中所有中包含数据库中所有的对象存储空间名称，在创建对象存储空间之前，可以的对象

41、存储空间名称，在创建对象存储空间之前，可以使用使用objectStoreNames.ContainsobjectStoreNames.Contains()()方法判断对象存储空方法判断对象存储空间名称是否已经存在，例如：间名称是否已经存在，例如：if(!db.objectStoreNames.contains(employees)varobjectStore=db.createObjectStore(employees,keyPath:id)onupgradeneeded事件事件 通常在通常在onupgradeneededonupgradeneeded事件的处理函数事件的处理函数中执行改变数据

42、库结构的操作（包括创建对中执行改变数据库结构的操作（包括创建对象存储空间）。象存储空间）。onupgradeneededonupgradeneeded事件在下事件在下列情况下被触发：列情况下被触发： 数据库第一次被打开时；数据库第一次被打开时； 打开数据库时指定的版本号高于当前被持久打开数据库时指定的版本号高于当前被持久化的数据库版本号。化的数据库版本号。【例例 15】 p在在IndexedDBIndexedDB数据库数据库MyTestDatabaseMyTestDatabase中创中创建对象存储空间建对象存储空间employeesemployees。p定义一个定义一个“创建对象存储空间创建对

43、象存储空间”按钮，代按钮，代码如下：码如下：创建创建对象存储空间对象存储空间create()方法方法 varrequestfunctioncreate()request=indexedDB.open(MyTestDatabase1)request.onerror=function(event)alert(错误号：错误号：+event.target.errorCode)request.onupgradeneeded=function(event)vardb=request.resultif(!db.objectStoreNames.contains(employees)varobjectStor

44、e=db.createObjectStore(employees,keyPath:id)【例例 16】 p显示在显示在IndexedDBIndexedDB数据库数据库MyTestDatabaseMyTestDatabase中中包含的对象存储空间信息。包含的对象存储空间信息。p定义一个定义一个“获取对象存储空间信息获取对象存储空间信息”按钮，按钮，代码如下：代码如下：获取获取对象存储空间信息对象存储空间信息getinfo ()方法方法 varrequestfunctiongetinfo()window.indexedDB=window.indexedDB|window.mozIndexedDB|

45、window.webkitIndexedDBif(window.indexedDB)request=window.indexedDB.open(MyTestDatabase1)request.onerror=function(event)alert(错误号：错误号：+event.target.errorCode)request.onsuccess=function(event)vardb=request.resultgetinfo ()方法方法 document.getElementById(info).innerHTML=数据库数据库MyTestDatabase共有共有+db.objectS

46、toreNames.length.toString()+个对象存个对象存储空间储空间for(vari=0idb.objectStoreNames.lengthi+)document.getElementById(info).innerHTML+=对象存储空间名对象存储空间名:+db.objectStoreNamesielsealert(您的浏览器不支持您的浏览器不支持IndexedDB数据库。数据库。)div元素元素info p程序从程序从db.objectStoreNamesdb.objectStoreNames数组中获取对数组中获取对象存储空间信息，并将其显示在象存储空间信息，并将其显示在

47、divdiv元素元素infoinfo中。中。pdivdiv元素元素infoinfo的定义代码如下：的定义代码如下：获取对象存储空间信息获取对象存储空间信息 5 创建索引创建索引 p可以通过调用可以通过调用ObjectStoreObjectStore对象对象. .createIndexcreateIndex()()方法在对象存储空间中创建索引，方法如方法在对象存储空间中创建索引，方法如下：下：var索引对象索引对象=ObjectStore对象对象.createIndex(索引名索引名,创建索引的列（即创建索引的列（即keyPath）,索引选项索引选项)例如例如 pObjectStoreObjec

48、tStore指向对象存储空间指向对象存储空间employeesemployees，下面的语句可以在对象存储，下面的语句可以在对象存储空间空间employeesemployees的列的列emailemail上创建一个唯一上创建一个唯一索引索引emailemail。objectStore.createIndex(email,email,unique:true)【例例 17】 varrequestfunctioncreate()request=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+eve

49、nt.target.errorCode)request.onupgradeneeded=function(event)vardb=request.resultif(!db.objectStoreNames.contains(employees)varobjectStore=db.createObjectStore(employees,keyPath:id)objectStore.createIndex(email,email,unique:true)提示提示 p因为数据库因为数据库MyTestDatabaseMyTestDatabase已经存在，为已经存在，为了触发了触发onupgradene

50、ededonupgradeneeded事件，可以在事件，可以在openopen方法中使用数据库版本号参数。方法中使用数据库版本号参数。 6 事务事务 p事务是包含一组数据库操作的逻辑工作单事务是包含一组数据库操作的逻辑工作单元。在事务中包含的数据库操作是不可分元。在事务中包含的数据库操作是不可分割的整体，要么一起被执行，要么回滚到割的整体，要么一起被执行，要么回滚到执行事务之前的状态。执行事务之前的状态。1transaction()方法方法 l调用调用transaction()transaction()方法可以定义一个事务，方法如下方法可以定义一个事务，方法如下l事务对象事务对象 = = 数据

51、库实例数据库实例. transaction(. transaction(事务操作的对事务操作的对象存储空间名象存储空间名, , 事务模式事务模式) )l事务模式包括如下事务模式包括如下3 3种情况：种情况：lIDBTransaction.READ_ONLYIDBTransaction.READ_ONLY，默认值，只读模式，也，默认值，只读模式，也可以使用可以使用 readonlyreadonly ；lIDBTransaction.READ_WRITEIDBTransaction.READ_WRITE，可读写模式，也可以使，可读写模式，也可以使用用 readwritereadwrite ；lID

52、BTransactionIDBTransaction. .VERSION_CHANGE. .VERSION_CHANGE，版本升级模式。，版本升级模式。事务对象支持下面事务对象支持下面3种事件种事件 errorerror，当事务中出现错误时触发，默认，当事务中出现错误时触发，默认的处理方式为回滚事务；的处理方式为回滚事务； abortabort，当事务被终止时触发；，当事务被终止时触发； completecomplete，当事务中的所有操作请求都，当事务中的所有操作请求都被处理完成时触发。被处理完成时触发。下面的代码演示如何定义和使用事务下面的代码演示如何定义和使用事务 vartransact

53、ion=db.transaction(employees,readwrite)/当所有的数据都被增加到数据库时执行一些操作当所有的数据都被增加到数据库时执行一些操作transaction.oncomplete=function(event)alert(Alldone!)transaction.onerror=function(event)/不要忘记进行错误处理！不要忘记进行错误处理！/定义事务的操作定义事务的操作从事务中获得相关的对象存储空间对象从事务中获得相关的对象存储空间对象 var对象存储空间对象对象存储空间对象=transaction.objectStore(对象存储对象存储空间名空间

54、名)2插入数据插入数据 p通过对象存储空间对象通过对象存储空间对象.add().add()方法可以向方法可以向对象存储空间中插入数据，方法如下：对象存储空间中插入数据，方法如下：varrequest对象对象=对象存储空间对象对象存储空间对象.add(键键1:值值1,键键2:值值2,键键n:值值n)【例例 18】 p定义一个定义一个“插入数据插入数据”按钮，代码如下：按钮，代码如下：插入数据插入数据insert ()方法方法 varrequestfunctioninsert()request=indexedDB.open(MyTestDatabase)request.onerror=functi

55、on(event)alert(错误号：错误号：+event.target.errorCode)request.onsuccess=function(event)vardata=id:110,name:李明李明,age:35,email:insert ()方法方法 vardb=request.resultvartrans=db.transaction(employees,IDBTransaction.READ_WRITE)varstore=trans.objectStore(employees)varrequest1=store.add(data)request1.onsuccess=funct

56、ion(event)alert(成功插入数据，成功插入数据，id=+event.target.result)2查询数据查询数据p通过对象存储空间对象通过对象存储空间对象.get().get()方法可以从对象存储方法可以从对象存储空间中获取数据，方法如下：空间中获取数据，方法如下：varrequest对象对象=对象存储空间对象对象存储空间对象.get(keypath键值键值)p在得到的在得到的requestrequest对象的对象的sccesssccess事件的处理函数中，事件的处理函数中，获取查询的数据，方法如下：获取查询的数据，方法如下：request.onsuccess=function(

57、event)/event.target.result就是获取的数据就是获取的数据【例例 19】 p定义一个定义一个“获取数据获取数据”按钮，代码如下：按钮，代码如下：获取数据获取数据get()方法方法 varrequestfunctionget()request=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+event.target.errorCode)request.onsuccess=function(event)vardb=request.resultvartrans=db.tran

58、saction(employees,IDBTransaction.READ_WRITE)varstore=trans.objectStore(employees)varrequest1=store.get(110)get()方法方法 request1.onsuccess=function(event)document.getElementById(info).innerHTML=id=110的记录的记录=name:+event.target.result.name+age:+event.target.result.age+emaii:+event.target.result.emaildiv元

59、素元素info的定义代码的定义代码 获取获取id=110的记录的记录 3删除数据删除数据 p通过对象存储空间对象通过对象存储空间对象.delete().delete()方法可以方法可以删除对象存储空间中的数据，方法如下：删除对象存储空间中的数据，方法如下：varrequest对象对象=对象存储空间对象对象存储空间对象.delete(keypath键值键值)【例例 20】 p定义一个定义一个“插入数据插入数据”按钮，代码如下：按钮，代码如下：删除数据删除数据deletedata()方法方法 script type=text/varvar request; request;function fun

60、ction deletedatadeletedata()()request = request = indexedDB.open(MyTestDatabaseindexedDB.open(MyTestDatabase););request.onerrorrequest.onerror = = function(eventfunction(event) ) alert(alert(错误号：错误号： + + event.target.errorCodeevent.target.errorCode););request.onsuccessrequest.onsuccess = = function(

61、eventfunction(event) ) varvar db = db = request.resultrequest.result; ;deletedata()方法方法 varvar trans = trans = db.transaction(employeesdb.transaction(employees, , IDBTransaction.READ_WRITEIDBTransaction.READ_WRITE););varvar store = store = trans.objectStore(employeestrans.objectStore(employees););va

62、rvar request1 = store.delete(110); request1 = store.delete(110);request1.onsuccess = request1.onsuccess = function(eventfunction(event) ) alert( alert(成功删除数据成功删除数据);); 7 游标游标 p通过对象存储空间对象通过对象存储空间对象.get().get()方法只能根据方法只能根据key key pathpath键值从对象存储空间中获取数据，如果要获取键值从对象存储空间中获取数据，如果要获取对象存储空间中的一组数据，就需要使用游标。对象存

63、储空间中的一组数据，就需要使用游标。p游标从字面来理解就是游动的光标。游标从字面来理解就是游动的光标。p用数据库语言来描述，游标是映射在结果集中一行用数据库语言来描述，游标是映射在结果集中一行数据上的位置实体，有了游标，用户就可以访问结数据上的位置实体，有了游标，用户就可以访问结果集中的任意一行数据了。果集中的任意一行数据了。p将游标放置到某行后，即可对该行数据进行操作，将游标放置到某行后，即可对该行数据进行操作，最常见的操作是提取当前行数据。最常见的操作是提取当前行数据。【例例 21】 p为了演示游标的作用，在对象存储空间为了演示游标的作用，在对象存储空间employeesemployees

64、中插入一组数据。定义一个中插入一组数据。定义一个“插入数据插入数据”按钮，代码如下：按钮，代码如下：插入数据插入数据insert ()方法方法 插入数据插入数据varrequestfunctioninsert()request=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+event.target.errorCode)request.onsuccess=function(event)vardata=id:110,name:Tom,age:25,email:,id:210,name:John

65、,age:26,email:,id:310,name:Alice,age:27,email:,id:410,name:Mike,age:28,email:,id:510,name:Sophia,age:29,email:接上接上vardb=request.resultvartrans=db.transaction(employees,IDBTransaction.READ_WRITE)varstore=trans.objectStore(employees)/删除可能的垃圾数据删除可能的垃圾数据store.delete(110)store.delete(210)store.delete(310

66、)store.delete(410)store.delete(510)for(variindata)varrequest1=store.add(datai)request1.onsuccess=function(event)alert(成功插入数据，成功插入数据，id=+event.target.result)1遍历对象存储空间中的数据p可以通过调用可以通过调用ObjectStoreObjectStore对象对象. .openCursoropenCursor()()方法方法在对象存储空间中打开游标，方法如下：在对象存储空间中打开游标，方法如下：varrequest对象对象=ObjectStor

67、e对象对象.openCursor()p在在requestrequest对象的对象的onsuccessonsuccess()()处理函数中可以通过处理函数中可以通过event.target.resultevent.target.result得到游标对象，代码如下：得到游标对象，代码如下：request.onsuccess=function(event)varcursor=event.target.result/游游标对象标对象使用下面的方法可以访问游标对象中的数据使用下面的方法可以访问游标对象中的数据 lcursor.keycursor.key，得到游标中的，得到游标中的Key pathKey

68、path值；值；lcursor.valuecursor.value. .键名，得到游标中指定键的值。键名，得到游标中指定键的值。l打开游标后，游标指向对象存储空间中的第一条数打开游标后，游标指向对象存储空间中的第一条数据。据。l调用调用cursor.continuecursor.continue()()方法可以将游标移动到下方法可以将游标移动到下一条记录，并触发一条记录，并触发requestrequest对象的对象的successsuccess事件。事件。l因此，在因此，在requestrequest对象的对象的onsuccessonsuccess()()处理函数中调处理函数中调用用curso

69、r.continuecursor.continue()()方法就可以遍历打开的对象方法就可以遍历打开的对象存储空间中的数据存储空间中的数据【例例 22】 p使用游标遍历对象存储空间使用游标遍历对象存储空间employeesemployees中中的数据。定义一个的数据。定义一个“查询数据查询数据”按钮，代按钮，代码如下：码如下：查询数据查询数据query ()方法方法 varrequestfunctionquery()request=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+event.

70、target.errorCode)request.onsuccess=function(event)vardb=request.resultvartrans=db.transaction(employees,IDBTransaction.READ_WRITE)query ()方法方法 varstore=trans.objectStore(employees)varrequest1=store.openCursor()request1.onsuccess=function(event)varcursor=event.target.resultif(cursor)document.getEleme

71、ntById(info).innerHTML+=id:+cursor.key+name:+cursor.value.name+age:+cursor.value.age+email:+cursor.value.email+cursor.continue()elsealert(查询完成查询完成)使用游标遍历对象存储空间使用游标遍历对象存储空间employees中的数据中的数据 2指定查询数据的范围指定查询数据的范围 p如果在打开游标时不希望遍历对象存储空间如果在打开游标时不希望遍历对象存储空间中的所有数据，也可以在中的所有数据，也可以在openCursoropenCursor()()方法方法中指

72、定一个查询范围，方法如下：中指定一个查询范围，方法如下：varrequest对象对象=ObjectStore对象对象.openCursor(查询范围对象查询范围对象)（1）匹配等于指定键值的记录）匹配等于指定键值的记录 p使用使用IDBKeyRange.onlyIDBKeyRange.only()()方法可以指定查询方法可以指定查询范围为指定键值的记录，方法如下：范围为指定键值的记录，方法如下：查询范围对象查询范围对象=IDBKeyRange.only(指指定键值定键值)（2）匹配小于指定键值的记录）匹配小于指定键值的记录 p使用使用IDBKeyRange.lowerBoundIDBKeyRa

73、nge.lowerBound()()方法可以指定方法可以指定查询范围小于指定键值的记录，方法如下：查询范围小于指定键值的记录，方法如下：查询范围对象查询范围对象=IDBKeyRange.lowerBound(指指定键值定键值,是否不包括指定键值是否不包括指定键值)p如果第如果第2 2个参数等于个参数等于truetrue，则查询范围不包括，则查询范围不包括指定键值，否则查询范围包括指定键值。默认指定键值，否则查询范围包括指定键值。默认值为值为falsefalse。（3）匹配大于指定键值的记录）匹配大于指定键值的记录 p使用使用IDBKeyRange.upperBoundIDBKeyRange.u

74、pperBound()()方法可以指定查方法可以指定查询范围大于指定键值的记录，方法如下：询范围大于指定键值的记录，方法如下：查询范围对象查询范围对象=IDBKeyRange.upperBound(指定键值指定键值,是是否不包括指定键值否不包括指定键值)p如果第如果第2 2个参数等于个参数等于truetrue，则查询范围不包括指定，则查询范围不包括指定键值，否则查询范围包括指定键值。默认值为键值，否则查询范围包括指定键值。默认值为falsefalse。（4）匹配指定范围内的记录）匹配指定范围内的记录 p使用使用IDBKeyRange.boundIDBKeyRange.bound()()方法可以

75、指定查询方法可以指定查询范围大于指定键值的记录，方法如下：范围大于指定键值的记录，方法如下：查询范围对象查询范围对象=IDBKeyRange.upperBound(下限键值下限键值,上限键值上限键值,是否不包括下限键值是否不包括下限键值,是否不包括是否不包括上限键值上限键值)【例例 23】 p使用游标遍历对象存储空间使用游标遍历对象存储空间employeesemployees中中id id 在在210210（包含）和（包含）和410410（不包含）之间的数据。（不包含）之间的数据。p定义一个定义一个“查询数据查询数据”按钮，代码如下：按钮，代码如下：查询数据查询数据query ()方法方法 v

76、arrequestfunctionquery()request=indexedDB.open(MyTestDatabase)request.onerror=function(event)alert(错误号：错误号：+event.target.errorCode)request.onsuccess=function(event)vardb=request.resultvartrans=db.transaction(employees,IDBTransaction.READ_WRITE)varstore=trans.objectStore(employees)接上接上varrange=IDBKey

77、Range.bound(210,410,false,true)varrequest1=store.openCursor(range)request1.onsuccess=function(event)varcursor=event.target.resultif(cursor)document.getElementById(info).innerHTML+=id:+cursor.key+name:+cursor.value.name+age:+cursor.value.age+email:+cursor.value.email+cursor.continue()elsealert(查询完成查询

78、完成)使用游标查询指定范围内的记录使用游标查询指定范围内的记录 3游标的顺序游标的顺序 p默认情况下，游标是按正序（顺序）遍历数默认情况下，游标是按正序（顺序）遍历数据的。也可以在调用据的。也可以在调用openCursoropenCursor()()方法时，方法时，指定遍历数据顺序，方法如下：指定遍历数据顺序，方法如下：varrequest对象对象=ObjectStore对象对象.openCursor(查询范围对象查询范围对象,游标顺序选游标顺序选项项)游标顺序选项包括下面游标顺序选项包括下面4种情况种情况 IDBCursor.NEXTIDBCursor.NEXT，顺序循环；，顺序循环； ID

79、BCursor.NEXT_NO_DUPLICATEIDBCursor.NEXT_NO_DUPLICATE，顺序循，顺序循环且键值不重复；环且键值不重复； IDBCursor.PREVIDBCursor.PREV，倒序循环；，倒序循环； IDBCursor.PREVIDBCursor.PREV _NO_DUPLICATE _NO_DUPLICATE，倒序，倒序循环且键值不重复。循环且键值不重复。【例例 24】 p在在【例例 22 22】的基础上实现使用游标倒序遍历的基础上实现使用游标倒序遍历对象存储空间对象存储空间employeesemployees中的数据。将中的数据。将【例例 2222】的的openCursoropenCursor()()方法修改如下即可。方法修改如下即可。pvarvar request1 = request1 = store.openCursor(nullstore.openCursor(null, , IDBCursor.PREVIDBCursor.PREV););单击单击“查询数据查询数据”按钮，如图按钮，如图 11所示所示开始实验吧！开始实验吧！