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

你的名字 2021-05-03 09:48 532阅读 0赞

### websql的一些基本操作 ###

--------------------

我已经把项目打包到gitgub上面，可以直接访问的地址在下面  
![这里写图片描述][_ _70]

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

源码地址：[Link 1][Link 1]

[_ _70]: /images/20210502/7e2614a76a03421997b53a96c606d9d0.png
[Link 1]: https://github.com/niezhiliang/websql