《十二》HTML5 Web SQL 数据库

最早的在客户端存储数据用的是cookie，cookie主要是用来保存用户的状态，并不适合用于保存客户端的本地数据。有以下几个原因：每次请求服务器的时候都会增加不必要的流量消耗，因为每次请求服务器都会将cookie发送至服务器；cookie存储数据的规则，并不那么好用，结构不也够清晰；cookie的存储容量极小，每个cookie的长度不能超过4kb，超过的话会截掉超出大小的最早存储的数据。

后来又出现了localStorage和sessionStorage。localStorage：永久存储，无论多久再进入页面都能获取到存储的数据；sessionStorage：临时存储，当关闭页面的时候会自动清除保存的数据。实际开发中这两个用的最多，但是存储结构依然不够清晰，查询本地存储的数据依然过于简单。

HTML5中新增了Web Sql本地数据库技术。Web Sql数据库API实际上不是HTML5规范的组成部分，它是一个独立的规范，可以使用与sql语言基本一致的语法做到数据库的增删改查。

Safari、 Chrome 和 Opera 浏览器支持Web Sql。

判断浏览器是否支持Web SQL：

if (window.openDatabase) {
    // 操作 web SQL        
} else {
     alert('当前浏览器不支持 webSQL !!!');
}

打开/新建数据库：

openDatabase()：用来打开或创建数据库，没有时创建，有则打开。返回的是一个数据库访问对象。
openDatabase(数据库名，数据库版本号，描述，数据库大小，数据库创建成功的回调)。

目前没有删除数据库的方法。

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,function(){
	...
});

开启事务：

transaction()：该方法有一个事务对象参数，该对象上有一系列数据库增删改查的方法。

// 开启事务
db .transaction(function (tx) {
      // 操作数据库的增删该查
      ....
});    

执行操作：

executeSql()：用于执行实际的SQL操作。tx.executeSql(执行数据库操作的sql语句，参数，数据库操作执行成功的回调，数据库操作执行失败的回调)。

//创建数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

// 开启一个事务
db .transaction(function (tx) {
	//创建一个数据表
     tx.executeSql( 'create table if not exists table1 (id,name)');

	//在数据表中添加数据
	tx.executeSql('insert into table1 (id,name) values (1,'小明')');
	tx.executeSql('insert into table1 (id,name) values (2,'小李')');
}); 

// 开启一个事务
db .transaction(function (tx) {
	//更新数据表里的一条数据
	tx.executeSql('updata table1 set name="小红" where id=1');
}); 

// 开启一个事务
db .transaction(function (tx) {
	//删除数据表里的一条数据
	tx.executeSql(''delete from table1 where id=1');
}); 

// 开启一个事务
db .transaction(function (tx) {
	//查询数据表里的数据
	tx.executeSql(
		''select * from table1',
		[],
		function(tx,result){
			//查询成功时的回调，可以通过result.rows属性使用查询返回的数据
		},
		function(tx,result){
			//查询失败时的回调
		},
	);
});