关于vue.js:在vue中使用HTML5-Web-SQL-浏览器数据库

HTML5 Web SQL 数据库

Web SQL 是在浏览器上模仿数据库，能够应用 JS 来操作 SQL 实现对数据的读写。\

Web SQL 数据库 API 并不是 HTML5 标准的一部分，然而它是一个独立的标准，引入了一组应用 SQL 操作客户端数据库的 APIs。

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

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

外围办法

以下是标准中定义的三个外围办法：

1. openDatabase：这个办法应用现有的数据库或者新建的数据库创立一个数据库对象。
2. transaction：这个办法让咱们可能管制一个事务，以及基于这种状况执行提交或者回滚。
3. 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>