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

一、怎样使用Web SQL Database

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html;charset=utf-8">
  5. 	<title>Web SQL</title>
  6. </head>
  7. <body>
  8. 	<script type="text/javascript">
  9. 		//1、创建数据库连接
  10. 		try
  11. 		{
  12. 			var db = window.openDatabase('mydb','1.0','The First Web SQL Database','2*1024');
  13. 		}
  14. 		catch(err)
  15. 		{
  16. 			alert(err.message?err.message:err.toString());
  17. 		}
  18. 		//验证连接
  19. 		if(!db)
  20. 		{
  21. 			alert("不能连接数据库");
  22. 		}
  23.  
  24. 		//2、运行SQL操作
  25. 		db.transaction(callback);
  26. 		//3、定义事务操作的回调函数
  27. 		function callback(tx)
  28. 		{
  29. 			//在事务中运行SQL操作
  30. 			var sql;
  31. 			//创建数据库表的结构
  32. 			sql = "create table emp(firstName text,lastName text,empType text,age integer)";
  33. 			tx.executeSql(sql);
  34.  
  35. 			//插入数据库记录
  36. 			sql = "insert into emp(firstName,lastName,empType,age) values('kang','yua','my',20)";
  37. 			tx.executeSql(sql);
  38.  
  39. 			sql = "insert into emp(firstName,lastName,empType,age) values(?,?,?,?)";
  40. 			tx.executeSql(sql,['kang','yuan','myEmp',30]);
  41.  
  42. 			//查询数据记录
  43. 			sql = "select * from emp";
  44. 			tx.executeSql(sql,[],queryResult,queryError);
  45. 		}
  46.  
  47. 		//SQL操作的回调函数
  48. 		function queryError(tx,err)
  49. 		{
  50. 			alert(err.message?err.message:err.toString());
  51. 		}
  52.  
  53. 		function queryResult(tx,result)
  54. 		{
  55. 			try
  56. 			{
  57. 				//获取全部行
  58. 				var rowList = result.rows;
  59. 				//获取每行的记录
  60. 				for(var i = 0; i < rowList.length; i++)
  61. 				{
  62. 					var row = rowList.item(i);
  63. 					for(var j in row)
  64. 					{
  65. 						document.write(j+"="+row[j]+"<br/>");
  66. 					}
  67. 				}
  68. 			}
  69. 			catch(err)
  70. 			{
  71. 				alert(err.message?err.message:err.toString());
  72. 			}
  73. 		}
  74. 	</script>
  75. </body>
  76. </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操作。

  1. //事务操作的JS代码放在一个worker.js文件里
  2. //在HTML中创建Worker并接收消息
  3. if(window.Worker)
  4. {
  5. var worker = new Worker("worker.js");
  6. ....
  7. }
  8. else
  9. {
  10. alert("不支持Worker");
  11. }

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对象。

  1. interface SQLResult
  2. {
  3. readonly attribute long insertId; //返回记录行的ID
  4. readonly attribute long rowsAffected; //返回SQL语句改变的行数
  5. readonly sttribute SQLResultRowList rows;//返回全部记录行，没有记录则返回空对象
  6. }

SQLResultRowList对象由SQLResultSetRowList接口定义

  1. interface SQLResultSetRowList
  2. {
  3. readoonly attribute unsigned long length; //放回记录的行数
  4. getter any item(in unsigned long index);//依据索引获取指定行，索引不存在返回null
  5. }

五、SQL注入

使用參数化查询能够防止恶意SQL注入。參数化查询指定SQL语句中使用问号(?)作为參数占位符，为数据库訪问应用程序开发提供了一种安全、封装性的方法，将输入交给数据库进行预处理。

《Javascript权威指南》学习笔记之十八：BOM新成就（1）--client存储数据（Web SQL DataBase实现）的更多相关文章

  1. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  2. JavaScript权威指南学习笔记6

    这两天主要翻看了书中的第18-22章,重点看了第17章:事件化处理,其它几章节主要是翻了下书知道有相关的概念,没有真正理解其中的内容,或者没有考虑究竟如何能把里面的内容应用到实际的项目中.说的讽刺一点 ...

  3. 《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/30255899     数据构成了web网站的 ...

  4. javascript权威指南学习笔记1

    打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备: ...

  5. JavaScript权威指南学习笔记4

    今天看了第9.10.11章,感觉收获最大还是正则表达式那章节,不过这些不用太多脑子思考,问题用到了直接查书就可以了,下面分别总结一下: 第9章类和模块:分9节,前面8节都是在讲类相关的知识,最后一节讲 ...

  6. Javascript权威指南学习笔记

    第二章:词法结构 ;function a(){alert(2)};//前面的分号保证正确地语句解析 第三章:类型.值和变量 基本概念: 1.数据类型---能够表示并操作的值的类型叫做数据类型. 2.变 ...

  7. javascript权威指南学习笔记3

    今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9   in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...

  8. javascript权威指南学习笔记2

    Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相 ...

  9. JavaScript权威指南学习笔记5

    下午在杭图回去前看了书中第二部分的13-17章,看的很粗,感觉大部分东西自己已经知道或者平时开发中不会用到,很多章节只是简单的翻了一下,没有仔细思考里面说到的道理,下面对各章节简单的记录下. 第13章 ...

  10. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

随机推荐

  1. 【hadoop之翊】——基于CentOS的hadoop2.4.0伪分布安装配置

    今天总算是把hadoop2.4的整个开发环境弄好了,包括 windows7上eclipse连接hadoop,eclipse的配置和測试弄得烦躁的一逗比了~ 先上一张成功的图片,hadoop的伪分布式安 ...

  2. c++ 计算程序运行时间

    转载 http://blog.csdn.net/trustbo/article/details/10582287 以前经常听人提起如何计算程序运行时间,给出一系列函数,当时没有注意,随便选了clock ...

  3. HDU 4288 Coder （线段树）

    Coder 题目:http://acm.hdu.edu.cn/showproblem.php?pid=4288 题意:有三种类型的操作,(1)."add x",表示往集合里加入�数 ...

  4. 【Linux探索之旅】第一部分第六课：Linux如何安装在虚拟机中

    内容简介 1.第一部分第六课:Linux如何安装在虚拟机中 2.第二部分第一课预告:终端Terminal,好戏上场 Linux如何安装在虚拟机中 虽然我们带大家一起在电脑的硬盘上安装了Ubuntu这个 ...

  5. 自定义错误页面mvc用法

    原谅我这个新手,对大神们来说这么简单的问题,竟折腾了我一个上午,仅此文章做个记录,供以后备用. 自定义错误页面(custom error pages)在asp.net webform里的配置请看htt ...

  6. yum简介（转）

    yum是什么yum = Yellow dog Updater, Modified 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它能便于管理大量系统的更新问题yum特点可 ...

  7. 做一个自动修改本机IP和mac的bat文件

    原文:做一个自动修改本机IP和mac的bat文件 1.ip bat修改理论探讨 前两天我突然萌生了一个念头:能不能做一个小程序来实现自动配置或修改IP和mac,达到一键搞定的目的,这样尤其适合那些带着 ...

  8. fastjson初始化对性能的影响(转)

    之前在项目中序列化是用thrift,性能一般,而且需要用编译器生成新的类,在序列化和反序列化的时候感觉很繁琐,因此想转到json阵营.对比了jackson,gson等框架之后,决定用fastjson, ...

  9. Unity 二战中加飞机

    一个简短的引论: 谢意: 本申请中使用<Unity3D\2D移动游戏开发>提供资源.著作权属于作者.感谢作者.基于原始时本申请的二次开发. 要素: 1.增加2s cd的机身旋转,旋转时保持 ...

  10. 如何设置ubuntu自己主动的睡眠时间

    我相信很多在学习linux的过程中.总会遇到,不时系统会冬眠自己主动,因此,即使再次输入password.么重要的内容怕别人看 另外假设你常常使用像Putty这样子的远程登录软件的话,假设你的linu ...