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

websql的一些基本操作

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).namelet sex =  results.rows.item(i).sexlet age =  results.rows.item(i).agelet id =  results.rows.item(i).idvar o = new Object()//创建一个js对象o.name = nameo.age = ageo.id = ido.sex = sexarry.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.namelet sex = this.upstu.sexlet age = this.upstu.agelet id = this.upstu.idthis.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

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

mysql笔记 SQL语句简单的增删改查
文章目录 mysql来源 navicat快捷键 mysql数据库语言分类 DQL 简单查询条件查询模糊查询分组查询使用limit字句多表查询在增删改句子中使用子查询排序显示当前使用数据 ...
sql的简单的增删改查
1启动服务: net start mssql$实例名 net start mssql$sunjob net stop mssql$实例名 2启动资源管理器 sqlwb 数 ...
html单页面js完成表数据库自动生成带注释的java实体类和简单的增删改查sql
支持Mysql和Oracle,mybatis和ibatis可选.功能主要还是字符串的拼凑完成的,把用把表信息复制过来或者增加后台,就可以生成简单的增删改查了临时体验点这里我也不知道地址什么时候失效 ...
java增删改查代码_Java web 简单的增删改查程序(超详细)
就是简单的对数据进行增删改查.代码如下: 1.bean层:用来封装属性及其get set方法 toString方法,有参构造方法,无参构造方法等. public classBean {private ...
通过flask实现web页面简单的增删改查
通过flask实现web页面简单的增删改查 1.后台程序falsk_web01.py #coding:utf-8from flask import Flask,render_template,requ ...
实现简单的增删改查（Asp.Net MVC+Layui）
实现简单的增删改查(Asp.Net MVC+Layui) 一.页面效果二.前期准备 1.新建项目 2. 在项目中新建文件夹(设置mvc的雏形) 3.连接数据库(SqlServer) JdbcUtil ...
Struts2 注解开发实现简单的增删改查，超详细教程
声明:此文是原创,如果需要转载请注明出处:https://blog.csdn.net/hunter_max/article/details/80575542 上一篇博客<Struts2 注解开发 ...
Hibernate简单实现增删改查
Hibernate简单实现增删改查 2020.08.10 用了一下午时间入门了Hibernate给和我一样想学的小白分享一下 hibernate是一个对象关系映射框架它对jdbc进行了封装只需要调用 ...
SpringMVC_实现简单的增删改查
实现简单的增删改查 1:创建User的javabean package com.doaoao.bean; public class User {private String name;private ...
android连接sqlite进行简单的增删改查和事务管理
为什么80%的码农都做不了架构师?>>> Android连接数据库sqlite并进行简单的表创建和增删改查功能参考代码,使用Android单元测试进行验证,首先新建项目进行配置 ...

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

websql的一些基本操作

核心方法

创建web数据库

数据库中创建一张表

为student表添加两条数据

查询student表中的数据

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

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

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

最新文章

热门文章