使用本地存储和会话存储能够实现简单的对象持久化，能够对简单的键值对或对象进行存储。可是，对于比較复杂的关系数据进行处理时，就要用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）--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. Foursquare 8.0 ：聪明人给互联网公司上的流量转化课

    今年 5 月上线的 Swarm 虽然应用制作精良,但不免让人怀疑是 Foursquare一次失败的互联网公司服务越界和用户忠诚度试水.但非常快这群聪明人让我们发现事情并没有这么简单:他们给互联网公司们 ...

  2. 【原创】leetCodeOj --- Min Stack 解题报告

    题目地址: https://oj.leetcode.com/problems/min-stack/ 题目内容: Design a stack that supports push, pop, top, ...

  3. Asp.net 视频摘要

    Asp.net一遍又一遍视频最近,例如中,大多数的实现.由于原因的版本号,.当然学过是学过.总结不可缺少. 先宏观后微观.刚学完,感觉知识特别乱,所以先画了张图: watermark/2/text/a ...

  4. C++面试宝典2011版

    1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new相应free仅仅会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,ne ...

  5. MySQL InnoDB存储引擎undo redo解析

    本文介绍MySQL数据库InnoDB存储引擎重做日志漫游 00 – Undo Log Undo Log 为了实现事务原子,在MySQL数据库InnoDB存储引擎,还使用Undo Log(简称:MVCC ...

  6. J Dp

    <span style="color:#000099;">/* ____________________________________________________ ...

  7. TCP/IP 网络精讲：OSI七层模型（第二课）

    内容简介 1.前言 2.第一部分第二课:互联网的创立,OSI七层模型 3.第一部分第三课预告:OSI第一层,连接你的机器 前言 PS:昨天做了课程大纲之后,发现这个坑挖得有点大.不过既然挖了,岂有不跳 ...

  8. 因host命令导致无法正常SHUTDOWN的实验

    SHUTDOWN有几个參数能够使用: SHUTDOWN NORMAL:NORMAL也是默认的子句,运行的条件是 No new connections are allowed after the sta ...

  9. BestCoder Round #16

    BestCoder Round #16 题目链接 这场挫掉了,3挂2,都是非常sb的错误 23333 QAQ A:每一个数字.左边个数乘上右边个数,就是能够组成的区间个数,然后乘的过程注意取模不然会爆 ...

  10. Java多线程&lt;1&gt;

    1.Java多线程的概念: 线(Thread):它指的是一个任务的从开始执行流程到结束. 穿线提供执行任务的机构.供java条款.在一个程序可以启动多个并发线程.候执行. 在单处理器系统中,多个线程共 ...