《Javascript权威指南》学习笔记之十八:BOM新成就(1)--客户端存储数据(Web SQL DataBase实现)
使用本地存储和会话存储可以实现简单的对象持久化,可以对简单的键值对或对象进行存储。但是,对于比较复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Database的支持情况如图:
一、如何使用Web SQL Database
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Web SQL</title> </head> <body> <script type="text/javascript"> //1、创建数据库连接 try { var db = window.openDatabase('mydb','1.0','The First Web SQL Database','2*1024'); } catch(err) { alert(err.message?err.message:err.toString()); } //验证连接 if(!db) { alert("不能连接数据库"); } //2、执行SQL操作 db.transaction(callback); //3、定义事务操作的回调函数 function callback(tx) { //在事务中执行SQL操作 var sql; //创建数据库表的结构 sql = "create table emp(firstName text,lastName text,empType text,age integer)"; tx.executeSql(sql); //插入数据库记录 sql = "insert into emp(firstName,lastName,empType,age) values('kang','yua','my',20)"; tx.executeSql(sql); sql = "insert into emp(firstName,lastName,empType,age) values(?,?,?,?)"; tx.executeSql(sql,['kang','yuan','myEmp',30]); //查询数据记录 sql = "select * from emp"; tx.executeSql(sql,[],queryResult,queryError); } //SQL操作的回调函数 function queryError(tx,err) { alert(err.message?err.message:err.toString()); } function queryResult(tx,result) { try { //获取所有行 var rowList = result.rows; //获取每行的记录 for(var i = 0; i < rowList.length; i++) { var row = rowList.item(i); for(var j in row) { document.write(j+"="+row[j]+"<br/>"); } } } catch(err) { alert(err.message?err.message:err.toString()); } } </script> </body> </html>
在google中的结果和Web SQL中的数据:
二、异步数据库
使用window.openDatabase()方法创建本地数据库连接或者建立与已经存在的数据库之间的连接,称为异步执行数据库。因为它的操作并非同步操作,而是需要很多回调函数来接收异步执行的结果。
1、var db = window.openDatabase(name,version,displayName,estimatedSize[,creationCallback]):返回一个Database对象。
name:定义的数据库名,区分大小写且唯一。
version:创建的数据库的版本,具有唯一性。
displayName:数据库的描述信息,一般用于说明数据库的用途。
estimatedSize:数据库的预计大小,以byte为大小,可以更改。
creationCallback:可选,数据库没有被创建时执行的回调函数。
2、执行数据库事务:数据库创建成功返回Database对象,可以执行数据库操作。数据库的操作都是事务的。
2.1 db.transaction(callback[,errorCallback[,sucessCallback]]):执行事务的读写操作。
callBack:定义事务操作要执行的回调函数,该函数内执行的SQL操作都是事务的,要么全部成功或要么全部失败。该函数有一个SQLTransaction对象参数,该对象定义的方法执行SQL操作。
errorCallback:定义事务操作失败时调用的函数,该函数有一个SQLError对象的参数。
sucessCallback:定义事务操作成功时调用的函数,无参数。
2.2 db.readTransaction(callback[,errorCallback[,sucessCallback]]):执行事务的读操作,不可以进行写操作。参数同2.1.
3、数据库版本管理
db.changeVersion(oldVersion,newVersion[,callback[,errorCallback[,sucessCallback]]]):用于改变数据库的版本。后续三个可选的参数同2.1。oldVersion是当前版本号,一般设置为Database.version(该属性返回DB的版本号);newVersion:新版本号,为字符串类型。
4、执行SQL语句:SQLTransaction对象定义了executeSql()方法执行SQL操作。
tx.executeSql(sql[,arg[,callback[,errorCallback]]]):
sql:执行的SQL语句
arg:可选,定义替换参数化查询中"?"占位符的数组,若没有使用参数化查询,参数可以忽略或者为空。
callback:定义一个SQL操作成功时执行的回调函数,若不定义,可以设置为null。该回调函数有两个参数:第一个是SQLTransaction对象,第二个是SQLResult对象,表示执行的结果。
errorCallback:定义一个SQL操作失败时执行的回调函数,若不定义,可以设置为null。该回调函数有两个参数:第一个是SQLTransaction对象,第二个是SQLError对象。
三、同步数据库
同步数据库操作仅用在worker内,不能用在网页中,但是在worker内可以使用异步数据库。目前仅有Chrome 6支持同步数据库。
1、创建连接:在worker()内用WorkerGlobalScope.openDatabaseSync()方法创建本地数据库或者建立已经存在的数据库之间的连接。称为同步数据库,不需要各种回调函数来处理数据库操作结果。
var db = self.openDatabaseSync(name,version,displayName,estimatedSize[,creationCallback]):返回一个DatabaseSync对象,参数同openDatabase()方法。
2、执行数据库事务:db.transaction(callback)[执行读写操作]和db.readTransaction(callback)[执行写操作],callback函数的参数是一个SQLTransactionSync对象,该对象定义的方法执行SQL操作。
//事务操作的JS代码放在一个worker.js文件中 //在HTML中创建Worker并接收消息 if(window.Worker) { var worker = new Worker("worker.js"); .... } else { alert("不支持Worker"); }
3、数据库版本管理:
db.changeVersion(oldVersion,newVersion[,callback]):用于改变数据库的版本。可选的参数同上。oldVersion是当前版本号,一般设置为DatabaseSync.version(该属性返回DB的版本号);newVersion:新版本号,为字符串类型。
4、执行SQL语句:SQLTransactionSync对象定义了executeSql()方法执行SQL操作。
var re=tx.executeSql(sql[,arg]):返回结果集
sql:执行的SQL语句
arg:可选,定义替换参数化查询中"?"占位符的数组。若没有使用参数化查询,参数可以忽略或者为空。
四、处理数据库操作的结果
成功使用executeSql()方法执行的SQL返回一个执行结果,该结果作为executeSql()的参数返回,是一个SQLResult对象。
interface SQLResult { readonly attribute long insertId; //返回记录行的ID readonly attribute long rowsAffected; //返回SQL语句改变的行数 readonly sttribute SQLResultRowList rows;//返回所有记录行,没有记录则返回空对象 }SQLResultRowList对象由SQLResultSetRowList接口定义
interface SQLResultSetRowList { readoonly attribute unsigned long length; //放回记录的行数 getter any item(in unsigned long index);//根据索引获取指定行,索引不存在返回null }
五、SQL注入
使用参数化查询可以防止恶意SQL注入。参数化查询指定SQL语句中使用问号(?)作为参数占位符,为数据库访问应用程序开发提供了一种安全、封装性的方法,将输入交给数据库进行预处理。
《Javascript权威指南》学习笔记之十八:BOM新成就(1)--客户端存储数据(Web SQL DataBase实现),古老的榕树,5-wow.com
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。