html 5 中的Web SQL

为什么要使用Web SQL？

在web系统或应用中，经常需要在本地存储一些数据，最早的在客户端存储数据用的是cookie(当然cookie主要还是用来保存用户的状态，业余可以干点保存本地数据的活)，事实它并不适合用于保存客户端的本地数据，有以下几个原因：

1，每次请求服务器的时候都会增加不必要的流量消耗，因为每次请求服务器是都会讲cookie发送至服务器。

2，cookie的数据存储数据的规则，并不那么好用，结构也不够清晰。

3，最重要的一点是cookie的存储容量极小，每个cookie的长度不能超过4kb，超过时最早存储cookie的数据会被截掉超出的大小，显然是不太够用的。

随着HTML5的发展，后来又出现了localStorage与sessionStorage：

1，localStorage：永久存储，无论多久再次进入页面或者页面所在站点（可以使用clearI或removeItem方法删除），都能获取到存储的数据。

2，sessionStorage：临时存储，当关闭页面的时候会自动清除保存的数据。

事实上在平时工作或开发自己项目的时候，这两个用的是最多，至少目前这两个对象还是可以满足大部分项目本地存储的需求，虽然储存结构依然不够清晰，查询本地存储的数据上依然过于简单。

现在主要是总结一下，HTML5中新增的API-->Web Sql本地数据库技术，Web Sql数据库API实际上不是HTML5规范的组成部分，它是一个独立的规范，它可以使用与sql语言基本一致的语法做到本地数据库的增删改查，所以有后端开发经验的开发者很容易上手。

Web SQL浏览器支持情况。

HTML5已经放弃了Web Sql Database数据库，该规范的指定工作已经停止。即便如此，基本上已经得到了大多数浏览器的支持。下图是支持情况。

Web SQL使用方法。

1，核心方法

　　openDatabase-使用现有的数据库或者新建的数据库创建一个数据库对象

　　transaction-能够控制一个事物，以及基于这种情况执行提交或者回滚

　　executeSql-执行实际的SQL语句

2，打开数据库

//用openDatabase()方法打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

1. 数据库名称
2. 版本号
3. 描述文本
4. 数据库大小（字节）
5. 创建回调（可选）

第五个参数，创建回调会在创建数据库后被调用。

3，创建表

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

4，插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "博客园")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.cnblogs.com")');
});

也可以使用动态值插入数据：

//e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

5，读取数据

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

db.transaction(function(tx) {
	tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
	tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "博客园")');
	tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.cnblogs.com")');
});

db.transaction(function(tx) {
	tx.executeSql('SELECT * FROM LOGS', [], function(tx, results) {
		var len = results.rows.length;
		msg = "<p>查询记录条数: " + len + "</p>";
		document.querySelector('#status').innerHTML += msg;

		for (i = 0; i < len; i++) {
			msg = "<p><b>" + results.rows[i].log + "</b></p>";
		}

	}, null);
});

6，删除记录

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

7，更新记录

tx.executeSql("UPDATE CC SET logname='www.baidu.com' WHERE id=2");

更新数据也可以是动态的

tx.executeSql("UPDATE CC SET logname='www.baidu.com' WHERE id=?", [id]);

注意：删除和修改不可以和建表语句放一个executeSql里，最好都分开写

以下是建好的数据库