在vue中使用HTML5 Web SQL 浏览器数据库

JasonMa - 2022-02-15 23:48:53

---

HTML5 Web SQL 数据库

Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。\

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。

Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。

核心方法

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。executeSql：这个方法用于执行实际的 SQL 查询。demo示例代码：

<template>
  <div>
    <h3>HTML5 Web SQL 数据库</h3>
    <button @click="openWebSQL">打开(创建) Web SQL</button>
    <button @click="addItem">新增一条记录</button>
    <button @click="updateItem">修改第一条数据</button>
    <button @click="deleteItem">删除一条记录</button>
    <button @click="getData">查询数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MySQL: null
    };
  },
  created() {
  },
  mounted() {},
  methods: {
    openWebSQL() {
      //我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库
      this.MySQL = openDatabase("mydb01", "1.0", "Test DB", 2 * 1024 * 1024);

      /**
       * 插入数据
       * 在执行上面的创建表语句后，我们可以插入一些数据：
       */
      this.MySQL.transaction(function(tx) {
        const d = tx.executeSql(
          "CREATE TABLE IF NOT EXISTS myTable (id unique, log)"
        );
        tx.executeSql('INSERT INTO myTable (id, log) VALUES (1, "你好，同学")');
        tx.executeSql('INSERT INTO myTable (id, log) VALUES (2, "甲乙丙丁")');
      });
    },
    //新增一条记录
    addItem() {
      this.MySQL.transaction(function(tx) {
        //先查
        tx.executeSql("Select * FROM myTable", [], (tx, results) => {
          console.log("查询结果 =>", results);
          console.log("查询数据长度 =>", results.rows.length);

          //我再根据查询已有数据的最后一条数据的id + 1 生成新id
          let e_id = results.rows[results.rows.length - 1].id + 1;
          let e_log = `Jason Ma到此一游${e_id}`;
          tx.executeSql("INSERT INTO myTable (id,log) VALUES (?, ?)", [
            e_id,
            e_log
          ]);
        });
      });
    },
    //修改一条记录
    updateItem() {
      this.MySQL.transaction(function(tx) {
        tx.executeSql("UPDATE myTable SET log='大王叫我来巡山...' WHERE id=1");
      });
    },
    //删除一条记录
    deleteItem(id = 3) {
      this.MySQL.transaction(function(tx) {
        //既可以动态id方式，也可以
        tx.executeSql("DELETE FROM myTable WHERE id=?", [id]);
        // tx.executeSql("DELETE FROM myTable WHERE id=2");
      });
    },
    //查询
    getData() {
      this.MySQL.transaction(function(tx) {
        tx.executeSql("Select * FROM myTable", [], (tx, results) => {
          console.log("查询结果 =>", results);
          console.log("查询数据长度 =>", results.rows);
        });
      });
    }
  }
};
</script>

<style></style>

Tags 标签

vue.jshtml5前端

扩展阅读