《十二》HTML5 Web SQL 数据库_web sql数据库-CSDN博客

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

后来又出现了 localStorage 和 sessionStorage。实际开发中这两个用的最多，但是存储结构依然不够清晰，查询本地存储的数据依然过于简单。

HTML5 中新增了 Web SQL 本地数据库技术，允许开发者在客户端存储和检索结构化数据。数据存储在用户的浏览器中。可以使用与 SQL 语言基本一致的语法做到数据库的增删改查。

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

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

新建/打开数据库：

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

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

开启事务：

transaction()：传入一个回调函数作为参数，回调函数会接收一个事务对象作为参数，该事务对象上有一系列数据库增删改查的方法。

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

执行操作：

executeSql(执行数据库操作的 sql 语句，参数，数据库操作执行成功的回调，数据库操作执行失败的回调)：用于执行实际的 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){
			//查询失败时的回调
		},
	);
});