首页 > 代码库 > 《Javascript权威指南》学习笔记之十八：BOM新成就（1）--客户端存储数据（Web SQL DataBase实现）

《Javascript权威指南》学习笔记之十八：BOM新成就（1）--客户端存储数据（Web SQL DataBase实现）

2024-07-08 01:59:39   219人阅读

    使用本地存储和会话存储可以实现简单的对象持久化，可以对简单的键值对或对象进行存储。但是，对于比较复杂的关系数据进行处理时，就要用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语句中使用问号(?)作为参数占位符，为数据库访问应用程序开发提供了一种安全、封装性的方法，将输入交给数据库进行预处理。

           

            


联系
我们