HTML5 Web SQL实现简单的增删改查websql使用方法vue2.0使用websql实现浏览器存储

websql的一些基本操作

---

我已经把项目打包到gitgub上面，可以直接访问的地址在下面
[在线测试地址]

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

核心方法

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

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

创建web数据库

	        //创建名为mydb的数据库             版本    描述      大小
          this.db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

数据库中创建一张表

//创建一个名为STUDENT的表,如果存在则不会创建
this.db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS STUDENT (id unique, name, sex, age)');
  tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443000,'苏雨', '男', 20]);
  tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443001,'苏苏', '女', 18]);
});

为student表添加两条数据

  tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES ('1522813443000','苏雨', '男', 20));
  //动态插入数据 和平常操作数据库差不多
  tx.executeSql('INSERT INTO STUDENT (id, name, sex, age) VALUES (?, ?, ?, ?)',[1522813443001,'苏苏', '女', 18]);

查询student表中的数据

    //查询student表
      get_data: function() {
        var arry = new Array()
        this.db.transaction(function (tx) {
          tx.executeSql('SELECT * FROM STUDENT', [], function (tx, results) {
            var len = results.rows.length, i;
            for (i = 0; i < len; i++){//把查出来的数据封装到一个对象里面 最后放到数组里面
              let name = results.rows.item(i).name
              let sex =  results.rows.item(i).sex
              let age =  results.rows.item(i).age
              let id =  results.rows.item(i).id
              var o = new Object()//创建一个js对象
              o.name = name
              o.age = age
              o.id = id
              o.sex = sex
              arry.push(o)
            }
          }, null);
        });//将数组赋值给vue创建的数组
        this.values = arry
      }

通过id删除student中的某条数据

	//删除student中的某条数据
      remove_data: function (index,row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.db.transaction(function(tx) {                   //id参数
            tx.executeSql('DELETE FROM STUDENT WHERE id = ?',[row.id]);
          })
          this.get_data()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

通过id修改student中数据的信息

仔细看就能发现websql和我们平常mysql操作数据差不多

    update_date: function () {
      let name = this.upstu.name
      let sex = this.upstu.sex
      let age = this.upstu.age
      let id = this.upstu.id
      this.db.transaction(function (tx) {
        tx.executeSql('UPDATE STUDENT SET name = ?,sex = ?,age=? WHERE id=?',[name,sex,age,id]);
      })//动态获取数据
      this.get_data()
      this.editDialogVisible = false
      }

源码地址： [https://github.com/niezhiliang/websql