HTML5 程序设计第10章

1、第第10章章 本章知识点本章知识点10.1 10.1 概述概述 10.2 localstorage 10.2 localstorage 10.3 sessionstorage 10.3 sessionstorage 10.4 webSQL Database API 10.4 webSQL Database API 10.5 IndexedDB 10.5 IndexedDB 10.1 概述概述 p 10.1.1 HTML410.1.1 HTML4的本地数据存储方式的本地数据存储方式 p 10.1.2 HTML510.1.2 HTML5本地存储技术概述本地存储技术概述 10.1.1 HTML4的本

2、地数据存储方式的本地数据存储方式 在传统的在传统的WebWeb程序中，通常使用程序中，通常使用CookieCookie和和SessionSession来存储本地来存储本地数据。数据。 1Cookie Cookie存在如下缺陷存在如下缺陷 CookieCookie的数据大小是由限制的，大多数的数据大小是由限制的，大多数浏览器只支持最大为浏览器只支持最大为 4096 4096 字节的字节的 CookieCookie。有时不能满足需求。有时不能满足需求。 客户端可以禁用或清空客户端可以禁用或清空CookieCookie，从而影，从而影响程序的功能。响程序的功能。 当多人共用一台计算机时使用当多人共用

3、一台计算机时使用CookieCookie可可能会泄露用户隐私，带来安全问题。能会泄露用户隐私，带来安全问题。 2Session（会话）（会话） 10.1.2 HTML5本地存储技术概述本地存储技术概述 1 1localstorage localstorage 2 2sessionstorage sessionstorage 3 3web SQLweb SQL数据库数据库4 4IndexedDBIndexedDB 1localstorage localstoragelocalstorage类似于类似于CookieCookie，用于持久化，用于持久化的本地存储。但的本地存储。但localstora

4、gelocalstorage没有有效没有有效期，除非主动删除数据，否则数据是永期，除非主动删除数据，否则数据是永远不会过期的。远不会过期的。localstoragelocalstorage的存储能的存储能力也远大于力也远大于CookieCookie，可以存储多达，可以存储多达5MB5MB的的数据。数据。 2sessionstorage p sessionstoragesessionstorage类似于类似于SessionSession，用于本，用于本地存储一个会话（地存储一个会话（sessionsession）中的数据，）中的数据，这些数据只有在同一个会话中的页面才这些数据只有在同一个会话中的

5、页面才能访问并且当会话结束后数据也随之销能访问并且当会话结束后数据也随之销毁。因此毁。因此sessionStoragesessionStorage不是一种持久不是一种持久化的本地存储。化的本地存储。 3web SQL数据库数据库 除了使用除了使用localstoragelocalstorage将数据存储在将数据存储在本地文件中，本地文件中，HTML5HTML5甚至支持本地的甚至支持本地的web SQLweb SQL数据库。传统的数据库。传统的WebWeb应用程应用程序都是使用脚本语言访问序都是使用脚本语言访问WebWeb服务器服务器上的数据库，但是访问服务器会产上的数据库，但是访问服务器会产生

6、网络流量，而且需要等待服务器生网络流量，而且需要等待服务器的响应。操作本地数据库无疑大大的响应。操作本地数据库无疑大大提升了提升了HTML5HTML5的本地数据存储能力。的本地数据存储能力。4IndexedDB pIndexedDBIndexedDB是一种轻量级是一种轻量级NoSQLNoSQL数据库。数据库。NoSQLNoSQL是是非关系型的数据库，非关系型的数据库，NoSQLNoSQL是是Not Only SQLNot Only SQL的缩的缩写，意即反写，意即反SQLSQL运动，是一项全新的数据库革命运动，是一项全新的数据库革命性运动。性运动。pHTML5HTML5支持两种不同类型的数据库

7、，给了用户跟支持两种不同类型的数据库，给了用户跟多的选择，足以应对各种需求的多的选择，足以应对各种需求的WebWeb应用程序。应用程序。10.2 localstorage p10.2.1 10.2.1 浏览器对浏览器对localstoragelocalstorage的支持的支持情况情况p10.2.2 10.2.2 使用使用localstoragelocalstorage保存数据保存数据 p10.2.3 10.2.3 获取获取localstoragelocalstorage中的数据中的数据 p10.2.4 10.2.4 删除删除localstoragelocalstorage中的数据中的数据 p

8、10.2.5 storage10.2.5 storage事件事件 10.2.1 浏览器对浏览器对localstorage的支持情况的支持情况 p在在JavaScriptJavaScript中可以使用中可以使用window.localStoragewindow.localStorage属性检测浏览器对属性检测浏览器对localstoragelocalstorage的支持情况。的支持情况。如果如果window.localStoragewindow.localStorage等于等于TrueTrue，则表明当，则表明当前浏览器支持前浏览器支持localstoragelocalstorage；否则表明不

9、支持；否则表明不支持。 【例例10-1】 p在网页中定义一个按钮，单击此按钮时在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持，会检测浏览器是否支持localstoragelocalstorage。定义按钮的代码如下：。定义按钮的代码如下：检测浏览器是检测浏览器是否支持否支持localstorage单击按钮单击按钮check将调用将调用check()函数。函数。check()函数的定义代码如下函数的定义代码如下 function check() if(window.localStorage) alert(您的浏览器支持您的浏览器支持localstorage。); else alert(

10、您的浏览器不支持您的浏览器不支持localstorage。); 提示提示 p在使用在使用Internet ExploreInternet Explore测试时，必须将文件上测试时，必须将文件上传到传到WebWeb服务器上（或者服务器上（或者localhostlocalhost），才支持），才支持localstoragelocalstorage。如果直接打开本地的。如果直接打开本地的HTMLHTML文件，则文件，则提示不支持提示不支持localstoragelocalstorage。 10.2.2 使用使用localstorage保存数据保存数据 plocalstoragelocalstorag

11、e使用使用“键值键值”对保存数据，可以对保存数据，可以使用使用setItem()setItem()方法设置方法设置localstoragelocalstorage数据，语数据，语法如下：法如下：localStorage.setItem(, )p也可以通过也可以通过localStorage.localStorage. 和和localStoragelocalStorage的形式访问的形式访问localstoragelocalstorage数据。例如，下面数据。例如，下面3 3条语句都可以在条语句都可以在localstoragelocalstorage中存储键名为中存储键名为keykey、值为、值为

12、valuevalue的数据：的数据：localStorage.setItem(key, value);localStorage.key = value;localStoragekey = value;【例例10-2】 p在网页中定义一个按钮，单击此按钮时，在在网页中定义一个按钮，单击此按钮时，在localstoragelocalstorage中存储键名为中存储键名为keykey、值为、值为valuevalue的数据。按钮的定义代码如下：的数据。按钮的定义代码如下：使用使用localstorage保存数据保存数据单击按钮单击按钮check将调用将调用setItem()函数。函数。setItem(

13、)函数的定义代码如下：函数的定义代码如下： function setItem() if(window.localStorage) localStorage.setItem(key, value); else alert(您的浏览器不支持您的浏览器不支持localstorage。); 10.2.3 获取获取localstorage中的数据中的数据 p 可以使用可以使用getItem()getItem()方法设置方法设置localstoragelocalstorage数据，语法数据，语法如下：如下： = localStorage.getItem();p 也可以通过也可以通过localStorage

14、.localStorage. 和和localStoragelocalStorage的形式访问的形式访问localstoragelocalstorage数据。例如，下面数据。例如，下面3 3条语条语句都可以获取句都可以获取localstoragelocalstorage中存储的键名为中存储的键名为keykey的数的数据值到变量据值到变量valuevalue中：中：var value = localStorage.getItem(key);var value = localStorage.key;var value = localStoragekey;【例例10-3】 p 在网页中定义一个按钮，单

15、击此按钮时，从在网页中定义一个按钮，单击此按钮时，从localstoragelocalstorage中获取键名为中获取键名为keykey的值。按钮的定义代码如下：的值。按钮的定义代码如下：p 获取获取localstorage中的数据中的数据p 单击按钮将调用单击按钮将调用getItem ()getItem ()函数。函数。getItem ()getItem ()函数的定义代码如下：函数的定义代码如下：function getItem() if(window.localStorage) var value = localStorage.getItem(key); alert(value); el

16、se alert(您的浏览器不支持您的浏览器不支持localstorage。); 【例【例10-4】 function count() var count / 读取读取localstorage数据，并转换为数据，并转换为int类型类型 if(localStorage.getItem(count) = null) count =1 else count = parseInt(localStorage.getItem(count)+1; / 显示访问计数显示访问计数 if(count 1) document.write(您已是第您已是第 + count+次访问本站点了。次访问本站点了。); els

17、e document.write(欢迎您首次访问本站。欢迎您首次访问本站。); /保存新的访问计数保存新的访问计数 localStorage.setItem(count, count);window.addEventListener(load, count, true);使用使用localstorage记录用户访问网页的次数记录用户访问网页的次数 10.2.4 删除删除localstorage中的数据中的数据 p调用调用localStorage.removeItem()localStorage.removeItem()方法可以删方法可以删除除localstoragelocalstorage中指

18、定键的项，语法如下：中指定键的项，语法如下：plocalStorage.removeItem(key)localStorage.removeItem(key)pkeykey为要删除的指定键。为要删除的指定键。p如果要删除如果要删除localstoragelocalstorage中所有的数据，则可中所有的数据，则可以调用以调用localStorage.clear()localStorage.clear()方法。方法。 10.2.5 storage事件事件 p HTML5HTML5提供一个提供一个storagestorage事件，当事件，当setItem()setItem()、removeItem

19、()removeItem()或者或者clear()clear()方法被调用，并且数据真的方法被调用，并且数据真的发生了改变时，发生了改变时，storagestorage事件就会被触发。注意，只有事件就会被触发。注意，只有数据真的发生了变化，才会触发数据真的发生了变化，才会触发storagestorage事件。也就是事件。也就是说，如果当前的存储区域是空的，调用说，如果当前的存储区域是空的，调用clear()clear()是不会是不会触发事件的。或者通过触发事件的。或者通过setItem()setItem()来设置一个与现有值来设置一个与现有值相同的值，相同的值，storagestorage事件

20、也是不会被触发的事件也是不会被触发的toragetorage事件事件的的p EventEvent对象包含如下属性：对象包含如下属性： storageAreastorageArea，表示存储类型（，表示存储类型（localstoragelocalstorage或或sessionstoragesessionstorage）；）；p keykey，发生改变的项的，发生改变的项的keykeyp oldValue oldValue，发生改变的项的原值，发生改变的项的原值p newValuenewValue，发生改变的项的新值，发生改变的项的新值p urlurl， keykey改变发生的改变发生的URLU

21、RL【例【例10-5】 Your test data: Waiting for data via storage event. 接上接上 var addEvent = (function() if (document.addEventListener) return function(el, type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.addEventListener(type, fn, false); ; else return function(el,

22、type, fn) if (el.length) for (var i = 0; i el.length; i+) addEvent(eli, type, fn); else el.attachEvent(on + type, function() return fn.call(el, window.event); ); ; )();接上接上 var dataInput = document.getElementById(data), output = document.getElementById(fromEvent),save = document.getElementById(save)

23、;addEvent(window, storage, function (event) if (event.key = storage-event-test) output.innerHTML =key:+event.key+ - old:+event.oldValue+ - new:+ event.newValue; );addEvent(save, click, function () localStorage.setItem(storage-event-test, dataInput.value););浏览【例浏览【例10-5】的界面】的界面 提示提示 p必须将文件上传到必须将文件上传到

24、WebWeb服务器上（或者服务器上（或者localhostlocalhost），才支持），才支持storagestorage事件。事件。 p不同浏览器对不同浏览器对storagestorage事件的支持情况不事件的支持情况不同。经测试，同。经测试，Internet Explorer 9Internet Explorer 9可以可以在当前页面中接收到在当前页面中接收到storagestorage事件，而在事件，而在firefoxfirefox和和chromechrome中，必须同时打开两个中，必须同时打开两个窗口浏览【例窗口浏览【例10-510-5】，在其中一个窗口】，在其中一个窗口中单击按钮，

25、在另一个窗口会接收到中单击按钮，在另一个窗口会接收到storagestorage事件。事件。 10.3 sessionstorage p10.3.1 10.3.1 判断浏览器是否支持判断浏览器是否支持sessionstorage sessionstorage p10.3.2 10.3.2 使用使用sessionstoragesessionstorage保存数据保存数据p10.3.3 10.3.3 获取获取sessionstoragesessionstorage中的数据中的数据p10.3.4 10.3.4 删除删除sessionstoragesessionstorage中的数据中的数据 10.3

26、.1 判断浏览器是否支持判断浏览器是否支持sessionstorage p在在JavaScriptJavaScript中可以使用中可以使用window. window. sessionStoragesessionStorage属性检测浏览器对属性检测浏览器对sessionstoragesessionstorage的支持情况。如果的支持情况。如果window. sessionStoragewindow. sessionStorage等于等于TrueTrue，则，则表明当前浏览器支持表明当前浏览器支持sessionstoragesessionstorage；否则表明不支持。否则表明不支持。【例【例

27、10-6】 p 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持sessionstoragesessionstorage。定义按钮的代码如下：。定义按钮的代码如下：检测浏览器是否支持检测浏览器是否支持sessionstoragep 单击按钮单击按钮checkcheck将调用将调用check()check()函数。函数。check()check()函数的定义代码如下：函数的定义代码如下：function check() if(window.sessionStorage) alert(您的浏览器支持您的浏览器支持sessionstor

28、age。); else alert(您的浏览器不支持您的浏览器不支持sessionstorage。); 提示提示 p在使用在使用Internet ExploreInternet Explore测试时，必须测试时，必须将文件上传到将文件上传到WebWeb服务器上（或者服务器上（或者localhostlocalhost），才支持），才支持localstoragelocalstorage。如。如果直接打开本地的果直接打开本地的HTMLHTML文件，则提示不文件，则提示不支持支持localstoragelocalstorage。 10.3.2 使用使用sessionstorage保存数据保存数据 p

29、与与localstoragelocalstorage一样，一样，sessionstoragesessionstorage也使用也使用“键键值值”对保存数据，可以使用对保存数据，可以使用setItem()setItem()方法设置方法设置sessionstoragesessionstorage数据，语法如下：数据，语法如下：sessionStorage.setItem(, )p 也可以通过也可以通过sessionStorage.sessionStorage. 和和sessionStorage sessionStorage 的形式访问的形式访问sessionstoragesessionstorag

30、e数据。例如，下数据。例如，下面面3 3条语句都可以在条语句都可以在localstoragelocalstorage中存储键名为中存储键名为keykey、值为、值为valuevalue的数据：的数据：sessionStorage.setItem(key, value);sessionStorage.key = value;sessionStorage key = value;【例【例10-7】 p 在网页中定义一个按钮，单击此按钮时，在在网页中定义一个按钮，单击此按钮时，在sessionstoragesessionstorage中存储键名中存储键名为为keykey、值为、值为valuevalu

31、e的数据。按钮的定义代码如下：的数据。按钮的定义代码如下：使用使用sessionstorage保存数据保存数据p 单击按钮单击按钮checkcheck将调用将调用setItem()setItem()函数。函数。setItem()setItem()函数的定义代码如下：函数的定义代码如下：function setItem() if(window. sessionStorage) sessionStorage.setItem(key, value); else alert(您的浏览器不支持您的浏览器不支持sessionStorage。); 10.3.3 获取获取sessionstorage中的数据中

32、的数据 p 可以使用可以使用getItem()getItem()方法设置方法设置sessionstoragesessionstorage数据，语法如下：数据，语法如下： = sessionStorage.getItem();p 也可以通过也可以通过localStorage.localStorage. 和和localStoragelocalStorage的形式访问的形式访问sessionstoragesessionstorage数据。例如，下面数据。例如，下面3 3条语句都可以获取条语句都可以获取localstoragelocalstorage中存中存储的键名为储的键名为keykey的数据值到变

33、量的数据值到变量valuevalue中：中：var value = sessionStorage.getItem(key);var value = sessionStorage.key;p var value = sessionStorage key;var value = sessionStorage key;可以使用可以使用getItem()getItem()方法设置方法设置sessionstoragesessionstorage数据，语法如下：数据，语法如下： = sessionStorage.getItem();p 也可以通过也可以通过localStorage.localStorage

34、. 和和localStoragelocalStorage的形式访问的形式访问sessionstoragesessionstorage数据。例如，下面数据。例如，下面3 3条语句都可以获取条语句都可以获取localstoragelocalstorage中存中存储的键名为储的键名为keykey的数据值到变量的数据值到变量valuevalue中：中：var value = sessionStorage.getItem(key);var value = sessionStorage.key;var value = sessionStorage key;【例【例10-8】 p 在在【例例10-710-7

35、】的网页中增加一个按钮，单击此按钮时，从的网页中增加一个按钮，单击此按钮时，从sessionstoragesessionstorage中获取键名为中获取键名为keykey的值。按钮的定义代码如下：的值。按钮的定义代码如下：获取获取sessionstorage中的数据中的数据p 单击按钮单击按钮getItemgetItem将调用将调用getItem ()getItem ()函数。函数。getItem ()getItem ()函数的定义函数的定义代码如下：代码如下：function getItem () if(window. sessionStorage) var value = sessionS

36、torage.getItem(key); alert(value); else alert(您的浏览器不支持您的浏览器不支持sessionStorage。); 10.3.4 删除删除sessionstorage中的数据中的数据 p调用调用sessionStorage.removeItem()sessionStorage.removeItem()方法方法可以删除可以删除sessionStoragesessionStorage中指定键的项中指定键的项，语法如下：，语法如下：sessionStorage.removeItem(key)pkeykey为要删除的指定键。为要删除的指定键。p如果要删除如果

37、要删除sessionStoragesessionStorage中所有的数中所有的数据，则可以调用据，则可以调用sessionStorage.clear()sessionStorage.clear()方法。方法。10.4 webSQL Database API p10.4.1 10.4.1 判断浏览器是否支持判断浏览器是否支持webSQL webSQL Database API Database API p10.4.2 10.4.2 新建数据库新建数据库 p10.4.3 10.4.3 执行执行SQLSQL语句语句 10.4.1 判断浏览器是否支持判断浏览器是否支持webSQL Database

38、API p 使用使用windows. openDatabasewindows. openDatabase属性可以打开本数据库，并返回连接句柄。属性可以打开本数据库，并返回连接句柄。如果该句柄为如果该句柄为nullnull、undefinedundefined则说明不支持使用则说明不支持使用webSQL Database APIwebSQL Database API操作本地数据库，反之则支持。下面定义一个操作本地数据库，反之则支持。下面定义一个openDatabase()openDatabase()函数，用函数，用于打开本地数据库：于打开本地数据库：function getOpenDatabas

39、e() try /如果支持则返回数据库连接句柄如果支持则返回数据库连接句柄 if(!window.openDatabase) return window.openDatabase; else return undefined; catch (e) return undefined; 【例【例10-9】 p 在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持webSQL webSQL Database APIDatabase API。定义按钮的代码如下：。定义按钮的代码如下：检测浏览器是否支持检测浏览器是否支持webSQL Datab

40、ase APIp 单击按钮单击按钮checkcheck将调用将调用check()check()函数。函数。check()check()函数的定义代码如下：函数的定义代码如下：function check() if(getOpenDatabase() = undefined) alert(您的浏览器不支持您的浏览器不支持webSQL Database API。); else alert(您的浏览器支持您的浏览器支持webSQL Database API。); 10.4.2 新建数据库新建数据库 pwebSQL Database APIwebSQL Database API在中并不包括专门在中并不

41、包括专门用于创建数据库的用于创建数据库的APIAPI，但是以指定的数，但是以指定的数据库名为参数调用据库名为参数调用openDatabase()openDatabase()函数函数时，如果自定的数据库名不存在，则会时，如果自定的数据库名不存在，则会自动创建它。带参数的自动创建它。带参数的openDatabase()openDatabase()函数的语法如下：函数的语法如下：数据库连接句柄数据库连接句柄 = openDatabase(数数据库名据库名, 版本号版本号, 数据库显示名称数据库显示名称, 估计估计容量容量);【例【例10-10】 p 创建数据库创建数据库mydatabasemydat

42、abase的代码如下：的代码如下：function createDB() if(window.openDatabase = undefined) alert(您的浏览器不支持您的浏览器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) alert(创建成功。创建成功。); else alert(打开数据库失败。打开数据库失败。); 10.4.3 执行执行SQL语句语句 p使用使用transaction()transaction()函数

43、可以执行函数可以执行SQLSQL语句，语语句，语法如下：法如下：数据库连接句柄数据库连接句柄.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log); );ptransaction()transaction()函数的参数是一个回调函数，函数的参数是一个回调函数，使用回调函数的参数使用回调函数的参数txtx来调用来调用executeSql()executeSql()函函数可以执行数可以执行SQLSQL语句。下面分别介绍几个常用语句。下面分别介绍几个常用的的SQLSQL语句。语

44、句。1创建表语句创建表语句CREATE TABLE p 表是数据库中最重要的逻辑对象，是存储数据的主要表是数据库中最重要的逻辑对象，是存储数据的主要对象。在设计数据库结构时，很重要的工作就是设计对象。在设计数据库结构时，很重要的工作就是设计表的结构。关系型数据库的表由行和列组成。表的结构。关系型数据库的表由行和列组成。CREATE TABLE语句用于创建表语句用于创建表 CREATE TABLE IF NOT EXISTS 表表名名( 列名列名1数据类型数据类型 字段属性字段属性, 列名列名2数据类型数据类型 字段属性字段属性, 列名列名n数据类型数据类型 字段属性字段属性)【例【例10-11

45、】 function createTable() if(window.openDatabase = undefined) alert(您的浏览器不支持您的浏览器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(CREATE TABLE IF NOT EXISTS t(id UNIQUE,name); ); else alert(打开数据库失败。打开

46、数据库失败。); DROP TABLE语句语句 p可以使用可以使用DROP TABLEDROP TABLE语句删除表，语法语句删除表，语法如下：如下：DROP TABLE 表名表名p在在WebSQLWebSQL中执行中执行DROP TABLEDROP TABLE语句的方法语句的方法与执行与执行CREATE TABLECREATE TABLE语句的方法相似。语句的方法相似。2插入数据表语句插入数据表语句INSERT pINSERTINSERT语句用于向表中插入数据，基本语句用于向表中插入数据，基本使用方法如下：使用方法如下：INSERT INTO 表名表名 (列名列名1, 列名列名2, , 列名

47、列名n) VALUES (值值1, 值值2, , 值值n)【例【例10-12】 function insert () if(window.openDatabase = undefined) alert(您的浏览器不支持您的浏览器不支持webSQL Database API。); else var dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(INSERT INTO t(id ,name) VALUES (1, l

48、ee); ); else alert(打开数据库失败。打开数据库失败。); UPDATE语句语句 p可以通过可以通过UPDATEUPDATE语句修改表中的数据。语句修改表中的数据。UPDATEUPDATE语句的基本使用方法如下所示：语句的基本使用方法如下所示：UPDATE 表名表名 SET 列名列名1 = 值值1, 列名列名2 = 值值2, , 列名列名n = 值值nWHERE 更新条件表达式更新条件表达式DELETE语句语句 pDELETE FROM 表名表名WHERE 删除条删除条件表达式件表达式3查询数据表语句查询数据表语句SELECT SELECT子句子句FROM 子句子句 WHERE

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

50、uteSql(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为错误对象。为错误对象。 【例【例

51、10-13】 function select() if(window.openDatabase = undefined) alert(您的浏览器不支持您的浏览器不支持webSQL Database API。); elsevar dbs = window.openDatabase(mydatabase, v1.0, Save data DB, 100); if(dbs) dbs.transaction(function(tx) tx.executeSql(SELECT * FROM t, , function(tx, results) alert( results.rows.length);if

52、(results & results.rows & 0 results.rows.length) var text = ; 接上接上for (var i=0; i results.rows.length; i+) text += results.rows.item(i).id + + results.rows.item(i).name + ; document.getElementById(result).innerHTML = text; , null); ); else alert(打开数据库失败。打开数据库失败。); 定义一个定义一个“查询表查询表t”按钮按钮 查询表查询

53、表t定义一个定义一个标签，用于显示查询结果标签，用于显示查询结果 显示表显示表t的内容的内容 10.5 IndexedDB p10.5.1 10.5.1 数据库的相关概念数据库的相关概念 p10.5.2 10.5.2 判断浏览器是否支持判断浏览器是否支持IndexedDB IndexedDB p10.5.3 10.5.3 创建和打开数据库创建和打开数据库 p10.5.4 10.5.4 创建对象存储空间创建对象存储空间ObjectStore ObjectStore p10.5.5 10.5.5 创建索引创建索引 p10.5.6 10.5.6 事务事务 p10.5.7 10.5.7 游标游标 10

54、.5.1 数据库的相关概念数据库的相关概念 p1 1数据库数据库 p2 2数据库管理系统数据库管理系统 p3 3数据库系统数据库系统 p4 4NoSQLNoSQL数据库数据库 1数据库数据库 p数据库（数据库（DatabaseDatabase，DBDB），简单地讲就），简单地讲就是存放数据的仓库。不过，数据库不是是存放数据的仓库。不过，数据库不是数据的简单堆积，而是以一定的方式保数据的简单堆积，而是以一定的方式保存在计算机存储设备上的相互关联的数存在计算机存储设备上的相互关联的数据的集合。也就是说，数据库中的数据据的集合。也就是说，数据库中的数据并不是相互孤立的，数据和数据之间是并不是相互孤立

55、的，数据和数据之间是有关联的。有关联的。2数据库管理系统数据库管理系统 p数据库管理系统（数据库管理系统（Database Management Database Management SystemSystem，DBMSDBMS）是一种系统软件，介于）是一种系统软件，介于应用程序和操作系统之间，用于帮助我应用程序和操作系统之间，用于帮助我们管理输入到计算机中的大量数据。如们管理输入到计算机中的大量数据。如用于创建数据库，向数据库中存储数据用于创建数据库，向数据库中存储数据，修改数据库中的数据，从数据库中提，修改数据库中的数据，从数据库中提取信息等。取信息等。 一个数据库管理系统应具备如下功能一

56、个数据库管理系统应具备如下功能 p （1 1）数据定义功能。可以定义数据库的结构，定义数）数据定义功能。可以定义数据库的结构，定义数据库中数据之间的联系，定义对数据库中数据的各种据库中数据之间的联系，定义对数据库中数据的各种约束等。约束等。p （2 2）数据操纵功能：可以实现对数据库中数据的添加）数据操纵功能：可以实现对数据库中数据的添加、删除、修改，可以对数据库进行备份和恢复等。、删除、修改，可以对数据库进行备份和恢复等。p （3 3）数据查询功能：可以以各种方式提供灵活的查询）数据查询功能：可以以各种方式提供灵活的查询功能，使用户可以方便地使用数据库中的数据。功能，使用户可以方便地使用数据

57、库中的数据。p （4 4）数据控制功能：可以完成对数据库中数据的安全）数据控制功能：可以完成对数据库中数据的安全性控制、完整性控制、多用户环境下的并发控制等多性控制、完整性控制、多用户环境下的并发控制等多方面的控制。方面的控制。p （5 5）数据库通信功能：在分布式数据库或提供网络操）数据库通信功能：在分布式数据库或提供网络操作功能的数据库中还必须提供数据库的通信功能。作功能的数据库中还必须提供数据库的通信功能。数据库管理系统在计算机系统中的地位数据库管理系统在计算机系统中的地位 硬件 操 系 统 作 D B M S 应 用 开 发 工 具 应 用 系 统 3数据库系统数据库系统 p数据库系统

58、（数据库系统（Database SystemDatabase System，DBSDBS）是指在计算机系统中引入数据库的系统是指在计算机系统中引入数据库的系统，除了相关的硬件之外，数据库系统还，除了相关的硬件之外，数据库系统还包括数据库、数据库管理系统、应用系包括数据库、数据库管理系统、应用系统、数据库管理员和用户。统、数据库管理员和用户。p可以看出，数据库、数据库管理系统和可以看出，数据库、数据库管理系统和数据库系统是数据库系统是3 3个不同的概念，数据库强个不同的概念，数据库强调的是数据，数据库管理系统是系统软调的是数据，数据库管理系统是系统软件，而数据库系统强调的是系统。件，而数据库系统

59、强调的是系统。4NoSQL数据库数据库 p NoSQLNoSQL是新一代的数据库，是新一代的数据库，NoSQLNoSQL有有non-relationalnon-relational和和Not Only Not Only SQLSQL的意思，具有非关系型、高效、分布式、开放源代码等特点。的意思，具有非关系型、高效、分布式、开放源代码等特点。对于已经熟悉对于已经熟悉SQL ServerSQL Server等关系型数据库的读者而言，接受等关系型数据库的读者而言，接受NoSQLNoSQL数据库还需要有一个过程。数据库还需要有一个过程。NamNam为什么要提出为什么要提出NoSQLNoSQL的概念呢？因

60、的概念呢？因为传统的关系数据库在应付为传统的关系数据库在应付web2.0web2.0网站，特别是超大规模和高并网站，特别是超大规模和高并发的发的SNSSNS类型（社交网络）的类型（社交网络）的web2.0web2.0纯动态网站已经显得力不从心纯动态网站已经显得力不从心，暴露了很多难以克服的问题。例如，对数据库高并发读写的需，暴露了很多难以克服的问题。例如，对数据库高并发读写的需求、对海量数据的高效率存储和访问的需求、对数据库的高可扩求、对海量数据的高效率存储和访问的需求、对数据库的高可扩展性和高可用性的需求等。所以，关系数据库在很多情况下显得展性和高可用性的需求等。所以，关系数据库在很多情况下显得不太合适了。