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]