HTML5 学习笔记（三）——本地存储 - SeeYouBug(3)_H5之家

Web SQL Database可以让开发人员使用SQL语句操作客户端浏览器中嵌入的SQLite数据库，给开发人员提供了方便。对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这也是 HTML 5 的“Web SQLDatabase”API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库

三个核心方法
openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction：这个方法允许我们根据情况控制事务提交或回滚。
executeSql：这个方法用于执行真实的SQL查询。

4.1、创建数据库

使用openDatabase创建或打开数据库，如果存在就打开，如果不存在就创建，语法如下：

openDatabase(a,b,c,d,e);

a).数据库名称。
b).版本号目前为1.0
c).对数据库的描述
d).设置数据的大小，以Byte为单位
e).回调函数(可省略）

Web SQL DatabaseWeb SQL Database db; (){ log(); }); log(info){ $(; }

运行结果：

4.2、创建表

执行所有的SQL语句都将使用到transaction、executeSql两个方法，基本语法格式如下：

数据库对象.transaction(function(tx) { tx.executeSql( "要执行的sql", [参数], function(tx, result) { alert('成功时的回调方法'); }, function(tx, error) { alert('失败时的回调方法' + error.message); }); });

页面脚本如下：

Web SQL DatabaseWeb SQL Database创建表() { log(); }); createTable() { db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { log(); }, function(tx, error) { log( error.message); }); }); } log(info) { $(; }

运行结果：

当创建成功时，可以发现在出现了两个表，其中名为sqlite_sequence为自动增长用的序列。

4.3、添加数据

页面脚本如下：

Web SQL DatabaseWeb SQL Database创建表商品信息名称：价格：添加() { log(); }); createTable() { db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { log(); }, function(tx, error) { log( error.message); }); }); } insert() { db.transaction(function(tx) { tx.executeSql( , [$().val()], function(tx, result) { log(); }, function(tx, error) { log( error.message); }); }); } log(info) { $(; }

运行结果：

4.4、展示数据

页面脚本如下：

Web SQL DatabaseWeb SQL Database创建表编号名称价格删除商品信息名称：价格：添加() { log(); }); select() { ).remove(); db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { ) { ); $(]).appendTo(tr); $(]).appendTo(tr); $(]).appendTo(tr); ) $().append(del).appendTo(tr); tr.appendTo(); } }, function(tx, error) { log( error.message); }); }); } select(); createTable() { db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { log(); }, function(tx, error) { log( error.message); }); }); } insert() { db.transaction(function(tx) { tx.executeSql( , [$().val()], function(tx, result) { log(); select(); }, function(tx, error) { log( error.message); }); }); } log(info) { $(; }

运行结果如下：

4.5、编辑数据

页面脚本如下：

Web SQL DatabaseWeb SQL Database创建表编号名称价格删除商品信息名称：价格：添加更新() { log(); }); select() { ).remove(); db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { ) { ); $(]).appendTo(tr); $(]).appendTo(tr); $(]).appendTo(tr); ) ) $().append(del).append(edit).appendTo(tr); tr.appendTo(); } }, function(tx, error) { log( error.message); }); }); } select(); createTable() { db.transaction(function(tx) { tx.executeSql( , [], function(tx, result) { log(); }, function(tx, error) { log( error.message); }); }); } insert() { db.transaction(function(tx) { tx.executeSql( ).val()], function(tx, result) { log(); select(); }, function(tx, error) { log( error.message); }); }); } del(id, link) { db.transaction(function(tx) { tx.executeSql( , [id], function(tx, result) { log(); ).remove(); }, function(tx, error) { log( error.message); }); }); } edit(id) { db.transaction(function(tx) { tx.executeSql( , [id], function(tx, result) { $(]); $(]); $(]); log(); }, function(tx, error) { log( error.message); }); }); } update() { ).val()) { db.transaction(function(tx) { tx.executeSql( ).val()], function(tx, result) { log(); select(); $(); }, function(tx, error) { log( error.message); }); }); } else { log(); } } log(info) { $(; }

运行结果如下：

4.6、删除数据