简单示例

新建数据库

创建一个数据库，名为mydb，版本1.0，数据库介绍Test,数据库大小2M

const db = openDatabase('mydb', '1.0', 'Test', 2 * 1024 * 1024);

创建表

创建要给USERS表，它有两个字段，id,name,id字段类型为数字类型，自增主键。

db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id integer primary key AutoIncrement, name)')
})

修改表结构

添加一列

db.transaction(function (tx) {tx.executeSql('ALTER TABLE result  ADD master')
})

添加数据

向USERS表添加一条数据，因为ID自增，所以不用插入数据时候不用传ID

db.transaction(function (tx) {tx.executeSql('INSERT INTO USERS (name) VALUES (?)', ["张三"])})

修改数据

修改USERS表id为2的数据，修改它的name为王五

db.transaction(function (tx) {tx.executeSql('UPDATE USERS SET name=? WHERE id=?', [ "王五",2])
})

删除数据

删除表中id为2的数据

db.transaction(function (tx) {tx.executeSql('DELETE FROM USERS  WHERE id=?', [2])
})

查询数据

查询所有USERS表里的数据，数据结果放在results.rows。

db.transaction(function (tx) {tx.executeSql('SELECT * FROM USERS', [], function (tx, results) {console.log("结果",results.rows)}, null)
})

删除表

删除一个名为USERS的表

db.transaction(function (tx) {tx.executeSql('DROP TABLE USERS')})

完整案例

通过websql实现增删改查的DEMO演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>WEBSQL</title>
</head>
<body><h2>列表</h2><button onclick="refresh()">刷新</button><table border="1"><thead><tr><td>ID</td><td>姓名</td><td>操作</td></tr></thead><tbody id="list"></tbody></table><h2>新增</h2><input id="addName"><button onclick="add()">添加</button><h2>编辑</h2><input id="editName"><button  onclick="save()">保存</button>
</body>
<script>console.log("websql")// 创建数据库const db = openDatabase('mydb', '1.0', 'Test', 2 * 1024 * 1024);// 创建表db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS USERS (id integer primary key AutoIncrement, name)')})let editId = ''this.refresh()function template(id,name) {let trDom = document.createElement('tr')let idDom = document.createElement('td')idDom.innerText = idlet nameDom = document.createElement('td')nameDom.innerText = namelet actionDom = document.createElement('td')let actionButtonEdit = document.createElement('button')actionButtonEdit.innerText = '编辑'actionButtonEdit.setAttribute("onclick",'edit(' + id +',"' + name +'")')let actionButtonDel = document.createElement('button')actionButtonDel.innerText = '删除'actionButtonDel.setAttribute("onclick",'del(' + id +')')actionDom.appendChild(actionButtonEdit)actionDom.appendChild(actionButtonDel)trDom.appendChild(idDom)trDom.appendChild(nameDom)trDom.appendChild(actionDom)return trDom}function add() {console.log("添加")let dom = document.getElementById('addName')let name = dom.valueconsole.log("姓名",name)db.transaction(function (tx) {tx.executeSql('INSERT INTO USERS (name) VALUES (?)', [name])dom.value = ''})this.refresh()}function edit(id,name) {console.log("编辑",id)this.editId = idlet dom = document.getElementById('editName')dom.value = name}function del(id) {console.log("删除",id)db.transaction(function (tx) {tx.executeSql('DELETE FROM USERS WHERE id=?', [id])})this.refresh()}function save() {console.log("保存")if(this.editId){let dom = document.getElementById('editName')console.log("保存",this.editId,dom.value)let name = dom.valuelet sql = "UPDATE USERS SET name='" + name + "' WHERE id=" + this.editIdconsole.log("sql",sql)db.transaction(function (tx) {tx.executeSql(sql)})this.editId = ''dom.value = ''this.refresh()}else{alert("请先选择编辑项")}}function refresh() {console.log("刷新列表")const list = document.getElementById('list')list.innerHTML = ''db.transaction(function (tx) {tx.executeSql('SELECT * FROM USERS', [], function (tx, results) {console.log("查询结果",results)for(let i =0;i<results.rows.length;i++){let item = results.rows[i]console.log("结果",item)list.appendChild(template(item.id,item.name))}}, null)})}
</script>
</html>

【前端】之websql实现增删改查，包含简单示例相关推荐

jfinal mysql增删改查_Jfinal简单实现增删改查
最近学习了jfinal框架.就我感觉而言,我用起来的感觉真是很爽,以前在学习其他的框架的时候,实现增删改查的时候,你需要自己手动书写你的sql语句来与数据库进行数据交互,还要创建一个实例,然后实现它的 ...
php xml 增删改查,PHP实现对xml进行简单的增删改查(CRUD)操作示例
本文实例讲述了PHP实现对xml进行简单的增删改查(CRUD)操作.分享给大家供大家参考,具体如下: 假如有下面xml文件: 55.8 56 40 339 如何使用php对它进行CRUD?其实像这种简 ...
mongodb android,Android编程连接MongoDB及增删改查等基本操作示例
本文实例讲述了Android编程连接MongoDB及增删改查等基本操作.分享给大家供大家参考,具体如下: MongoDB简介 Mongodb,分布式文档存储数据库,由C++语言编写,旨在为WEB应用提 ...
系统增删查改的软件测试,软件测试人员必掌握的增删改查之简单查询
导读软件测试人员在工作使用SQL语言中的查询是使用得最多的,而查询也是SQL语言中最复杂的,很多测试人员只使用到其中最简单的查询 1.数据库的使用现在在任何项目中都有数据库存在,那么在测试过程中查 ...
vue php 增删改查,vue的增删改查（简单版）
添加 {{index+1}}{{item.id}} {{item.name}} {{item.con}} {{item.time}} 编辑删除姓名内容时间更新取消 export defau ...
查询jsp servelet mysql_JSP + Servlet + JDBC + Mysql 实现增删改查课程管理系统(示例代码)...
1.项目目录结构 2.项目环境 Eclipse IDE MYSQL jdk tomcat jar包 3.数据库相关配置先创建一个course的数据库名,然后在建立一个course的表要注意将i ...
elasticsearch 建立索引、增删改查及简单查询和组合查询的学习笔记
创建一个索引(数据库) PUT lagou # 索引名称 {"settings": {"index":{"number_of_shards" ...
java修改cookie的值_Java 对 Cookie增删改查的实现示例
Cookie属性 name:cookie的名称 value:cookie的值 maxAge:cookie的失效时间,默认为-1 值说明负数浏览器关闭后立即失效 0 马上清除cookie 正数设 ...
hbase 2.2.6表及数据的增删改查命令行示例

【前端】之websql实现增删改查，包含简单示例

websql增删改查