HTML5本地存储之数据库

最新推荐文章于 2019-09-19 21:44:15 发布

转载最新推荐文章于 2019-09-19 21:44:15 发布 · 989 阅读

文章标签：

#html5 #数据库 #存储

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML5

7 篇文章

订阅专栏

本文详细介绍了HTML5中的WebSQL Database API，包括如何使用openDatabase创建或打开数据库、transaction进行事务控制以及executeSql执行SQL查询。同时，还讲解了如何通过这些API实现数据表的创建、删除及数据的增删查改等操作。

简述：

对于存储简单数据结构的数据，使用sessionStorage和localStorage就足以了，但对于处理复杂的关系型数据，就需要 HTML 5 的“Web SQL Database”API 接口登场啦。可以把它理解成一个Html5环境下可以用Js执行CRUD（增删查改）的Web数据库

三大核心方法：

openDatabase：使用现有数据库或创建新数据库创建数据库对象
transaction：控制事务提交或回滚
executeSql：执行真实的SQL查询
-

数据库打开创建删除操作

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

var dataBase = openDatabase("student", "1.0", "学生表",
1024 * 1024, function () {
//do someting 
});

if (!dataBase) {
alert("数据库创建失败！");
} else {
alert("数据库创建成功"");
}

参数：

1.数据库名称。
2.版本号目前为1.0。
3.对数据库的描述。
4.设置数据的大小。
5.回调函数(可省）

2. 删除数据库

dataBase.transaction(function (tx) {
    tx.executeSql('drop database stu');
});

数据表创建与删除操作

1.创建数据表

dataBase.transaction( function(tx) {
    tx.executeSql(
        "create table if not exists stu (id REAL UNIQUE, name TEXT)",
        [],
        function(tx,result){ alert('创建stu表成功'); },
        function(tx, error){ alert('创建stu表失败:'+error.message);
        });
});

executeSql函数有四个参数：

表示查询的字符串，使用的SQL语言是SQLite
插入到查询中问号所在处的字符串数据
成功时执行的回调函数。返回两个参数：tx和执行的结果
一个失败时执行的回调函数。返回两个参数：tx和失败的错误信
息。

2. 删除数据表:

dataBase.transaction(function (tx) {
    tx.executeSql('drop table stu');
});

数据表CRUD操作：

1.添加数据

dataBase.transaction(function (tx) {
    tx.executeSql("insert into stu (id, name) values(?, ?)",
    [id, '徐明祥'],
    function () { alert('添加数据成功'); },
    function (tx, error) { alert('添加数据失败: '+error.message);
    } );
});

2. 删除数据

dataBase.transaction(function (tx) {
    tx.executeSql(
    "delete from stu where id= ?",
    [id],
    function (tx, result) {},
    function (tx, error) {
            alert('删除失败: ' + error.message);
    });
});

3.查询数据

dataBase.transaction(function (tx) {
    tx.executeSql(
    "select * from stu", 
    [],
    function (tx, result) { //执行成功的回调函数},
    function (tx, error) {
        alert('查询失败: ' + error.message);
    } );
});

参数说明:

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

4.更新数据

dataBase.transaction(function (tx) {
    tx.executeSql(
    "update stu set name = ? where id= ?",
    [“name,” “id”],
    function (tx, result) {},
    function (tx, error) {
        alert('更新失败: ' + error.message);
    });
});

学习参考博文：

Html5 学习系列（六）Html5本地存储和本地数据库：http://www.cnblogs.com/fly_dragon/p/3946012.html

HTML5本地存储之Database Storage篇：http://blog.youkuaiyun.com/hbcui1984/article/details/8471063