《Javascript权威指南》学习笔记之十八:BOM新成就(1)--client存储数据(Web SQL DataBase实现)

时间:2021-12-27 01:15:58

使用本地存储和会话存储能够实现简单的对象持久化,能够对简单的键值对或对象进行存储。可是,对于比較复杂的关系数据进行处理时,就要用Web SQL Database.浏览器对Web SQL Database的支持情况如图:

《Javascript权威指南》学习笔记之十八:BOM新成就(1)--client存储数据(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中的数据:

《Javascript权威指南》学习笔记之十八:BOM新成就(1)--client存储数据(Web SQL DataBase实现)《Javascript权威指南》学习笔记之十八:BOM新成就(1)--client存储数据(Web SQL DataBase实现)

二、异步数据库

使用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语句中使用问号(?)作为參数占位符,为数据库訪问应用程序开发提供了一种安全、封装性的方法,将输入交给数据库进行预处理。