HTML5中本地数据库存储及其应用

上一篇文章说过HTML5提供了代替的cookie的简单存储，这次主要说一下本地存储的数据库。

本地数据库

1.本地数据库介绍

对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，
它就力不从心了。这也是 HTML 5 的“Web SQLDatabase”API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行$CRUD$的Web数据库.

2.三个核心的方法

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

本地数据库的操作

1. 打开连接并创建数据库

var db = openDatabase("student","1.0","xuesheng",1024*1024,function(){});
参数说明：
A. 数据库名称。
B. 版本号 目前为1.0。
C. 对数据库的描述。
D. 设置数据的大小。
E. 回调函数(可省略）

2. 创建数据表

db.transaction(function(fx){
   fx.executeSql(
       "create table if not exists stu (id REAL UNIQUE,name TEXT)",
        [],
        function () {
            alert("表创建成功");
        },
        function () {
            alert("表创建失败");
        }
   );
});

executeSql函数有四个参数，其意义分别是：
1） 表示查询的字符串，使用的SQL语言是SQLite 3.6.19。
2） 插入到查询中问号所在处的字符串数据。
3） 成功时执行的回调函数。返回两个参数：tx和执行的结果。
4） 一个失败时执行的回调函数。返回两个参数：tx和失败的错误信息。

数据表添加数据

db.transaction(function(fx){
 fx.executeSql(
          "insert into stu (id,name) values (?,?),(?,?)",
          [3,"helios",2,"syl"],
          function () {
              alert("数据插入成功");
          },
          function () {
              alert("数据插入失败");
          }
  );
});

数据表查询数据

db.transaction(function(fx){
 fx.executeSql(
       "select * from stu",
        [],
        function (fx,result) {
            var len = result.rows.length;
            for(var i=0;i<len;i++) {
                one.innerHTML+=result.rows.item(i)["name"]+"<br>";
            }
        },
        function () {
            alert("表创建失败");
        }
   );
});

参数说明:
result是查询到的结果集，其中最重要的属性—SQLResultSetRowList 类型的 rows 是数据集的“行” 。
rows 有两个属性：length、item。length代表总条数，用item(num),可访问到具体的行。

数据表更新数据

fx.executeSql(
    "update stu set name=? where id=?",
         ["李四",1],
         function  () {
          alert("数据更新成功");
         },
         function  () {
          alert("数据更新失败");
         }
     );

数据表删除数据

fx.executeSql(
             "delete from stu where id=?",
             [1],
             function  () {
               one.innerHTML="";
               alert("数据删除成功");
              },
             function  () {
              alert("删除失败");
         });

删除表

db.transaction(function(fx) {
   fx.executeSql(
        "drop table stu",
          [],
          function () {
              alert("表删除成功");
          },
          function () {
              alert("表删除失败");
          }
     );
 })