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

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

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

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

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

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

openDatabase：这个办法应用现有的数据库或者新建的数据库创立一个数据库对象。
transaction：这个办法让咱们可能管制一个事务，以及基于这种状况执行提交或者回滚。
executeSql：这个办法用于执行理论的 SQL 查问。

<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>

HTML5 Web SQL 数据库

外围办法

demo 示例代码：