《数据库WebSQL》PPT课件.ppt

第9讲 数据库Web SQL,传统Web应用程序将大多数据都存储在Web服务器端的数据库中，本地存储的能力很弱。 而频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率。 HTML5的本地存储能力得到了很大的提高，不但可以像传统Web应用程序那样将数据存储在文件中，而且还支持本地的轻型数据库。,本章知识点,1 webSQL Database API 2 IndexedDB,1 webSQL Database API,1 判断浏览器是否支持webSQL Database API 2 新建数据库 3 执行SQL语句,1 判断浏览器是否支持webSQL Database API,使用windows. openDatabase属性可以打开本数据库，并返回连接句柄。如果该句柄为null、undefined则说明不支持使用webSQL Database API操作本地数据库，反之则支持。下面定义一个openDatabase()函数，用于打开本地数据库： function getOpenDatabase() try /如果支持则返回数据库连接句柄 if(!window.openDatabase) return window.openDatabase; else return undefined; catch (e) return undefined; ,【例 9】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持webSQL Database API。定义按钮的代码如下： 检测浏览器是否支持webSQL Database API,【例 9】,单击按钮check将调用check()函数。check()函数的定义代码如下： function check() if(getOpenDatabase() = undefined) alert(“您的浏览器不支持webSQL Database API。“); else alert(“您的浏览器支持webSQL Database API。“); ,2 新建数据库,webSQL Database API在中并不包括专门用于创建数据库的API，但是以指定的数据库名为参数调用openDatabase()函数时，如果自定的数据库名不存在，则会自动创建它。 带参数的openDatabase()函数的语法如下： 数据库连接句柄 = openDatabase(数据库名, 版本号, 数据库显示名称, 估计容量);,【例 10】,创建数据库mydatabase的代码如下： 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(打开数据库失败。); ,3 执行SQL语句,使用transaction()函数可以执行SQL语句，语法如下： 数据库连接句柄.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS LOGS (id unique, log); ); transaction()函数的参数是一个回调函数，使用回调函数的参数tx来调用executeSql()函数可以执行SQL语句。下面分别介绍几个常用的SQL语句。,1创建表语句CREATE TABLE,表是数据库中最重要的逻辑对象，是存储数据的主要对象。在设计数据库结构时，很重要的工作就是设计表的结构。关系型数据库的表由行和列组成。,CREATE TABLE语句用于创建表,CREATE TABLE IF NOT EXISTS 表名 ( 列名1 数据类型 字段属性, 列名2 数据类型 字段属性, 列名n 数据类型 字段属性 ),【例 11】, 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(打开数据库失败。); ,DROP TABLE语句,可以使用DROP TABLE语句删除表，语法如下： DROP TABLE 表名 在WebSQL中执行DROP TABLE语句的方法与执行CREATE TABLE语句的方法相似。,2插入数据表语句INSERT,INSERT语句用于向表中插入数据，基本使用方法如下： INSERT INTO 表名 (列名1, 列名2, , 列名n) VALUES (值1, 值2, , 值n),【例 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, lee)“); ); else alert(打开数据库失败。); ,UPDATE语句,可以通过UPDATE语句修改表中的数据。UPDATE语句的基本使用方法如下所示： UPDATE 表名 SET 列名1 = 值1, 列名2 = 值2, , 列名n = 值n WHERE 更新条件表达式,DELETE语句,DELETE FROM 表名WHERE 删除条件表达式,3查询数据表语句SELECT,SELECT子句 FROM 子句 WHERE 子句 各子句的主要功能说明如下。 SELECT子句：指定查询结果集的列组成，列表中的列可以来自一个或多个表； FROM子句：指定要查询的一个或多个表； WHERE子句：指定查询的条件；,transaction()函数,使用transaction()函数执行SELECT语句的语法如下： db.transaction(function (t) t.executeSql(SELECT语句, , function(t, r) , function(t, e) );,t.executeSql()函数有4个参数,第一个参数是要执行的SELECT语句； 第2个参数是要传递的参数，比如查询条件，如果没有参数，则使用； 第3个参数是处理查询结果集的回调函数，参数r为结果集； 第4个参数是处理错误的回调函数，参数e为错误对象。,【例 13】, function select() 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(“SELECT * FROM t“, , function(tx, results) alert( results.rows.length); if(results ,接上,for (var i=0; i ; document.getElementById(result).innerHTML = text; , null); ); else alert(打开数据库失败。); ,定义一个“查询表t”按钮, 查询表t ,定义一个标签，用于显示查询结果,显示表t的内容,总结,我们在数据库中处理大量结构化数据，html5引入Web SQL Database概念。 它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。 悲剧正是产生于此，Web SQL Database规范页面有着这样的声明。,翻译一下：Web SQL Database曾经在W3C推荐规范上，但规范工作已经停止了。 目前已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化。 也就是说这是一个废弃的标准了，虽然部分浏览器已经实现，但。,但是我们学一下也没什么坏处，而且能和现在W3C力推的IndexedDB做比较。 不过Chrome的控制台真心好用啊，神马cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了很多调试代码工作。,Web SQL Database实际上已经被废弃，而HTML5的支持的本地存储实际上变成了Web Storage（Local Storage和Session Storage）与IndexedDB。 Web Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心。 IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。,2 IndexedDB,1 数据库的相关概念 2 判断浏览器是否支持IndexedDB 3 创建和打开数据库 4 创建对象存储空间ObjectStore 5 创建索引 6 事务 7 游标,1 数据库的相关概念,1数据库 2数据库管理系统 3数据库系统 4NoSQL数据库,1数据库,数据库（Database，DB），简单地讲就是存放数据的仓库。不过，数据库不是数据的简单堆积，而是以一定的方式保存在计算机存储设备上的相互关联的数据的集合。也就是说，数据库中的数据并不是相互孤立的，数据和数据之间是有关联的。,2数据库管理系统,数据库管理系统（Database Management System，DBMS）是一种系统软件，介于应用程序和操作系统之间，用于帮助我们管理输入到计算机中的大量数据。如用于创建数据库，向数据库中存储数据，修改数据库中的数据，从数据库中提取信息等。,一个数据库管理系统应具备如下功能,（1）数据定义功能。可以定义数据库的结构，定义数据库中数据之间的联系，定义对数据库中数据的各种约束等。 （2）数据操纵功能：可以实现对数据库中数据的添加、删除、修改，可以对数据库进行备份和恢复等。 （3）数据查询功能：可以以各种方式提供灵活的查询功能，使用户可以方便地使用数据库中的数据。 （4）数据控制功能：可以完成对数据库中数据的安全性控制、完整性控制、多用户环境下的并发控制等多方面的控制。 （5）数据库通信功能：在分布式数据库或提供网络操作功能的数据库中还必须提供数据库的通信功能。,数据库管理系统在计算机系统中的地位,3数据库系统,数据库系统（Database System，DBS）是指在计算机系统中引入数据库的系统，除了相关的硬件之外，数据库系统还包括数据库、数据库管理系统、应用系统、数据库管理员和用户。 可以看出，数据库、数据库管理系统和数据库系统是3个不同的概念，数据库强调的是数据，数据库管理系统是系统软件，而数据库系统强调的是系统。,4NoSQL数据库,NoSQL是新一代的数据库，NoSQL有non-relational和Not Only SQL的意思，具有非关系型、高效、分布式、开放源代码等特点。对于已经熟悉SQL Server等关系型数据库的读者而言，接受NoSQL数据库还需要有一个过程。,Nam为什么要提出NoSQL的概念呢？,因为传统的关系数据库在应付web2.0网站，特别是超大规模和高并发的SNS类型（社交网络）的web2.0纯动态网站已经显得力不从心，暴露了很多难以克服的问题。 例如，对数据库高并发读写的需求、对海量数据的高效率存储和访问的需求、对数据库的高可扩展性和高可用性的需求等。 所以，关系数据库在很多情况下显得不太合适了。NoSQL 是非关系型数据存储的广义定义，它打破了关系型数据库的垄断局面。NoSQL 数据存储不需要固定的表结构，通常也不存在连接操作。 在大数据存取上具备关系型数据库无法比拟的性能优势。NoSQL的概念在 2009年初得到了广泛认同。,2 判断浏览器是否支持IndexedDB,使用window.indexedDB属性可以判断浏览器是否支持IndexedDB数据库。 当前，IndexedDB的规范尚未最终定稿，不同的浏览器厂商还是使用浏览器前缀实现IndexedDB API。基于Gecko内核的浏览器使用moz前缀，基于WebKit内核的浏览器使用webkit前缀。 如果还希望使用window.indexedDB来判断浏览器是否支持IndexedDB数据库，则可以做下面的处理： window.indexedDB = window.indexedDB | window.mozIndexedDB | window.webkitIndexedDB,【例 14】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持IndexedDB数据库。定义按钮的代码如下： 检测浏览器是否支持IndexedDB数据库,check()函数, function check() window.indexedDB = window.indexedDB | window.mozIndexedDB | window.webkitIndexedDB if(window.indexedDB) alert(“您的浏览器支持IndexedDB数据库。“); else alert(“您的浏览器不支持IndexedDB数据库。“); ,3 创建和打开数据库,window.indexedDB对象只有一个open方法，用于打开指定的数据库，语法如下： request对象 = window.indexedDB.open(数据库名, 数据库版本号) 如果指定的数据库名存在，则打开它；否则创建数据库。request对象用于处理用户对数据库的操作请求。可以通过它定义操作成功和失败的处理函数。,request.onerror,通过request.onerror可以指定操作失败的处理函数，方法如下： request.onerror = function(event) / 错误处理 可以通过event.target.errorCode获取错误号。,提示,浏览器通常不希望恶意网站随意使用IndexedDB数据库来存储数据，因此当Web应用程序第一次使用IndexedDB数据库时会询问用户是否允许访问。 而且多数浏览器在隐私模式下不允许使用IndexedDB数据库。,request.onsuccess,通过request.onsuccess可以指定操作成功的处理函数，方法如下： request.onerror = function(event) / 成功处理 request.result是执行指定操作的结果，例如，执行打开数据库的操作后，通过request.result可以获得打开数据库的实例。通过数据库实例可以访问数据库。,创建IndexedDB数据库MyTestDatabase,var db var request = indexedDB.open(“MyTestDatabase“) request.onerror = function(event) alert(“错误号：“ + event.target.errorCode) request.onsuccess = function(event) db = request.result ,4 创建对象存储空间ObjectStore,IndexedDB不是关系型数据库，它使用对象存储空间（ObjectStore）来存储数据。一个数据库中可以包含多个对象存储空间，对象存储空间使用键值对的形式来存储数据，即每个数据都由一组键和一组值组成键类似关系型数据库中表的字段。例如下面的代码表示一条员工数据： “id“: “110“, “name“: “李明“, “age“: “35“, “email“: ““ ,IndexedDB数据库提供键的选项,createObjectStore()方法,使用数据库实例对象的createObjectStore()方法可以创建对象存储空间，方法如下： ObjectStore对象 = 数据库实例对象.createObjectStore(对象存储空间名, 提供键的选项) 例如，创建一个对象存储空间employees，指定keyPath选项为id（即主键为id），代码如下： var objectStore = db.createObjectStore(“employees“, keyPath: “id“ ),createObjectStore()方法,数据库实例对象.objectStoreNames中包含数据库中所有的对象存储空间名称，在创建对象存储空间之前，可以使用objectStoreNames.Contains()方法判断对象存储空间名称是否已经存在，例如： if(!db.objectStoreNames.contains(“employees“) var objectStore = db.createObjectStore(“employees“, keyPath: “id“ ); ,onupgradeneeded事件,通常在onupgradeneeded事件的处理函数中执行改变数据库结构的操作（包括创建对象存储空间）。onupgradeneeded事件在下列情况下被触发： 数据库第一次被打开时； 打开数据库时指定的版本号高于当前被持久化的数据库版本号。,【例 15】,在IndexedDB数据库MyTestDatabase中创建对象存储空间employees。 定义一个“创建对象存储空间”按钮，代码如下： 创建对象存储空间,create()方法, var request; function create() request = indexedDB.open(“MyTestDatabase1“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onupgradeneeded = function(event) var db = request.result; if(!db.objectStoreNames.contains(“employees“) var objectStore = db.createObjectStore(“employees“, keyPath: “id“ ); ; ,【例 16】,显示在IndexedDB数据库MyTestDatabase中包含的对象存储空间信息。 定义一个“获取对象存储空间信息”按钮，代码如下： 获取对象存储空间信息,getinfo ()方法, var request; function getinfo() window.indexedDB = window.indexedDB | window.mozIndexedDB | window.webkitIndexedDB if(window.indexedDB) request = window.indexedDB.open(MyTestDatabase1); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var db = request.result;,getinfo ()方法,document.getElementById(info).innerHTML = “数据库MyTestDatabase共有“ + db.objectStoreNames.length.toString() + “个对象存储空间“; for(var i=0;i对象存储空间名:“ + db.objectStoreNamesi; ; else alert(“您的浏览器不支持IndexedDB数据库。“); ,div元素info,程序从db.objectStoreNames数组中获取对象存储空间信息，并将其显示在div元素info中。 div元素info的定义代码如下： ,获取对象存储空间信息,5 创建索引,可以通过调用ObjectStore对象.createIndex()方法在对象存储空间中创建索引，方法如下： var 索引对象 = ObjectStore对象.createIndex( 索引名, 创建索引的列（即keyPath）, 索引选项);,例如,ObjectStore指向对象存储空间employees，下面的语句可以在对象存储空间employees的列email上创建一个唯一索引email。 objectStore.createIndex(“email“, “email“, unique: true ),【例 17】, var request; function create() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onupgradeneeded = function(event) var db = request.result; if(!db.objectStoreNames.contains(“employees“) var objectStore = db.createObjectStore(“employees“, keyPath: “id“ ); objectStore.createIndex(“email“, “email“, unique: true ); ; ,提示,因为数据库MyTestDatabase已经存在，为了触发onupgradeneeded事件，可以在open方法中使用数据库版本号参数。,6 事务,事务是包含一组数据库操作的逻辑工作单元。在事务中包含的数据库操作是不可分割的整体，要么一起被执行，要么回滚到执行事务之前的状态。,1transaction()方法,调用transaction()方法可以定义一个事务，方法如下 事务对象 = 数据库实例. transaction(事务操作的对象存储空间名, 事务模式) 事务模式包括如下3种情况： IDBTransaction.READ_ONLY，默认值，只读模式，也可以使用“readonly“； IDBTransaction.READ_WRITE，可读写模式，也可以使用“readwrite“； IDBTransaction. .VERSION_CHANGE，版本升级模式。,事务对象支持下面3种事件, error，当事务中出现错误时触发，默认的处理方式为回滚事务； abort，当事务被终止时触发； complete，当事务中的所有操作请求都被处理完成时触发。,下面的代码演示如何定义和使用事务,var transaction = db.transaction(“employees“, “readwrite“); / 当所有的数据都被增加到数据库时执行一些操作 transaction.oncomplete = function(event) alert(“All done!“) transaction.onerror = function(event) / 不要忘记进行错误处理！ / 定义事务的操作 ,从事务中获得相关的对象存储空间对象,var 对象存储空间对象 = transaction.objectStore(对象存储空间名),2插入数据,通过对象存储空间对象.add()方法可以向对象存储空间中插入数据，方法如下： var request对象 = 对象存储空间对象.add( 键1: 值1, 键2: 值2, 键n: 值n ),【例 18】,定义一个“插入数据”按钮，代码如下： 插入数据,insert ()方法, var request; function insert() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var data = “id“: “110“, “name“: “李明“, “age“: “35“, “email“: ““ ;,insert ()方法,var db = request.result; var trans = db.transaction(“employees“, IDBTransaction.READ_WRITE); var store = trans.objectStore(“employees“); var request1 = store.add(data); request1.onsuccess = function(event) alert(“成功插入数据，id=“ + event.target.result); ; ; ,2查询数据,通过对象存储空间对象.get()方法可以从对象存储空间中获取数据，方法如下： var request对象 = 对象存储空间对象.get(key path键值) 在得到的request对象的sccess事件的处理函数中，获取查询的数据，方法如下： request.onsuccess = function(event) / event.target.result 就是获取的数据 ,【例 19】,定义一个“获取数据”按钮，代码如下： 获取数据,get()方法, var request; function get() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var db = request.result; var trans = db.transaction(“employees“, IDBTransaction.READ_WRITE); var store = trans.objectStore(“employees“); var request1 = store.get(“110“);,get()方法,request1.onsuccess = function(event) document.getElementById(info).innerHTML = “id=110的记录= name:“ + + “age:“ + event.target.result.age + “emaii:“+event.target.result.email; ; ; ,div元素info的定义代码,获取id=110的记录,3删除数据,通过对象存储空间对象.delete()方法可以删除对象存储空间中的数据，方法如下： var request对象 = 对象存储空间对象.delete(key path键值),【例 20】,定义一个“插入数据”按钮，代码如下： 删除数据,deletedata()方法, var request; function deletedata() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var db = request.result;,deletedata()方法,var trans = db.transaction(“employees“, IDBTransaction.READ_WRITE); var store = trans.objectStore(“employees“); var request1 = store.delete(“110“); request1.onsuccess = function(event) alert(“成功删除数据“); ; ; ,7 游标,通过对象存储空间对象.get()方法只能根据key path键值从对象存储空间中获取数据，如果要获取对象存储空间中的一组数据，就需要使用游标。 游标从字面来理解就是游动的光标。 用数据库语言来描述，游标是映射在结果集中一行数据上的位置实体，有了游标，用户就可以访问结果集中的任意一行数据了。 将游标放置到某行后，即可对该行数据进行操作，最常见的操作是提取当前行数据。,【例 21】,为了演示游标的作用，在对象存储空间employees中插入一组数据。定义一个“插入数据”按钮，代码如下： 插入数据,insert ()方法,插入数据 var request; function insert() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var data = “id“: “110“, “name“: “Tom“, “age“: “25“, “email“: ““, “id“: “210“, “name“: “John“, “age“: “26“, “email“: ““, “id“: “310“, “name“: “Alice“, “age“: “27“, “email“: ““, “id“: “410“, “name“: “Mike“, “age“: “28“, “email“: ““, “id“: “510“, “name“: “Sophia“, “age“: “29“, “email“: ““ ;,接上,var db = request.result; var trans = db.transaction(“employees“, IDBTransaction.READ_WRITE); var store = trans.objectStore(“employees“); / 删除可能的垃圾数据 store.delete(“110“); store.delete(“210“); store.delete(“310“); store.delete(“410“); store.delete(“510“); for (var i in data) var request1 = store.add(datai); request1.onsuccess = function(event) alert(“成功插入数据，id=“ + event.target.result); ; ; ,1遍历对象存储空间中的数据,可以通过调用ObjectStore对象.openCursor()方法在对象存储空间中打开游标，方法如下： var request对象 = ObjectStore对象.openCursor(); 在request对象的onsuccess()处理函数中可以通过event.target.result得到游标对象，代码如下： request.onsuccess = function(event) var cursor = event.target.result /游标对象 ,使用下面的方法可以访问游标对象中的数据,cursor.key，得到游标中的Key path值； cursor.value.键名，得到游标中指定键的值。 打开游标后，游标指向对象存储空间中的第一条数据。 调用cursor.continue()方法可以将游标移动到下一条记录，并触发request对象的success事件。 因此，在request对象的onsuccess()处理函数中调用cursor.continue()方法就可以遍历打开的对象存储空间中的数据,【例 22】,使用游标遍历对象存储空间employees中的数据。定义一个“查询数据”按钮，代码如下： 查询数据,query ()方法, var request; function query() request = indexedDB.open(“MyTestDatabase“); request.onerror = function(event) alert(“错误号：“ + event.target.errorCode); ; request.onsuccess = function(event) var db = request.result; var trans = db.transaction(“employees“, IDBTransaction.READ_WRITE);,query ()方法,var store = trans.objectStore(“employees“); var request1 = store.openCursor(); request1.onsuccess = function(event) var cursor = event.target.result; if (cursor) document.getElementById(info).innerHTML += “id :“ + cursor.key + “; name :“ + + “; age :“ + cursor.value.age + “; email :“ + cursor.value.email + “; cursor.continue(); else alert(“查询完成“); ; ;,使用游标遍历对象存储空间employees中的数据,2指定查询数据的范围,如果在打开游标时不希望遍历对象存储空间中的所有数据，也可以在openCursor()方法中指定一个查询范围，方法如下： var request对象 = ObjectStore对象.openCursor(查询范围对象);,（1）匹配等于指定键值的记录,使用IDBKeyRange.only()方法可以指定查询范围为指定键值的记录，方法如下： 查询范围对象 = IDBKeyRange.only(指定键值),（2）匹配小于指定键值的记录,使用IDBKeyRange.lowerBo