H5 websql基本使用操作

主要方法

  • openDatabase 打开数据库或者新建的数据库创建一个数据库对象。

  • transaction 控制一个事务，以及基于这种情况执行提交或者回滚

  • executeSql 执行实际的 SQL 查询

打开/新建/数据库

使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下

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

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

  • 数据库名称
  • 版本号
  • 描述文本
  • 数据库大小
  • 创建回调 创建回调会在创建数据库后被调用。

插入表及数据

执行操作使用 database.transaction() 函数：

    const 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.runoob.com")');
        tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [id, log]);//动态传参 id,log为外部变量
       //executeSql 会映射数组参数中的每个条目给 "?"
    });

数据读取

    db.transaction(function (tx) {
       tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
            //results.rows为查询到的数据
            //results.rows.length为查询到的数据条数
       }, null);
    });

删除记录

    db.transaction(function (tx) {
        tx.executeSql('DELETE FROM LOGS  WHERE id=1');
    });
    db.transaction(function(tx) {
        tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);//删除传入的id的数据 也可以使用字符串拼接
    });

更新记录

    db.transaction(function (tx) {
        tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
    });
    db.transaction(function(tx) {
        tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);//更新传入的id的数据 也可以使用字符串拼接
    });

完整demo

     const 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.runoob.com")');
        console.log('数据表已创建，插入两条数据');
     });

     db.transaction(function (tx) {
          tx.executeSql('DELETE FROM LOGS  WHERE id=1');
          console.log('删除 id 为 1 的记录');
     });

     db.transaction(function (tx) {
         tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
         console.log('更新 id 为 2 的记录');
     });

     db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
           var len = results.rows.length, i;
           console.log("查询记录条数: " + len + "");
           for (i = 0; i < len; i++){
              console.log('数据：'+results.rows.item(i).log)
           }
        }, null);
     });