HTML5深入学习之 WebSQL 数据库
程序员文章站
2022-10-08 21:58:39
概述 WebSQL 并不是 HTML5规范的一部分,而是一个独立的规范,它可以用来做一些离线应用 核心API openDatabase() => 用来打开或创建数据库(没有时则创建,有则打开) transaction() => 这个方法可以控制一个或多个事务,以及基于这种情况提交或者回滚 execu ......
概述
websql 并不是 html5规范的一部分,而是一个独立的规范,它可以用来做一些离线应用
核心api
- opendatabase() => 用来打开或创建数据库(没有时则创建,有则打开)
- transaction() => 这个方法可以控制一个或多个事务,以及基于这种情况提交或者回滚
- executesql() =>用于执行实际的 sql 查询
判断浏览器是否支持该项功能
这个功能可以在最新版的 chrome, safari 和 opera
if (window.opendatabase) { // 操作 web sql } else { alert('当前浏览器不支持 websql !!!'); }
打开数据库
/** * 打开或创建数据库 * @param1 数据库名称 * @param2 版本号 * @param3 描述 * @param4 数据库大小 * @param5 回调函数 */ var database = opendatabase('stu', '1.0', '学生表', 1024*1024, function () {});
开启一个事务
// 开启事务 database.transaction(function (sql) { // 在这里操作数据库的增删该查 });
新建表格
sql.executesql( 'create table duxiu(id int, name text)', [], function () { alert('创建成功'); }, function () { alert('创建失败'); } );
插入一条数据
sql.executesql( // ? => 占位符 'insert into duxiu (id, name) values (?, ?)', [2, '张三'], function () { alert('插入一条数据成功'); }, function () { alert('插入一条数据失败'); } );
修改数据
sql.executesql( 'update duxiu set name = ?, id = ? where rowid = ?', ['王五', 3, 3], function () { alert('修改成功'); }, function () { alert('修改失败'); } );
查找数据
我这里是将数据查找出来并且显示到了表格中
sql.executesql( 'select * from duxiu', [], function (sql, res) { // console.log(res); var data = res.rows; console.log(data); // console.log(data.length); var table = document.createelement('table'); document.queryselector('div').appendchild(table); for (var i = 0; i < data.length; i++) { var tr = document.createelement('tr'); table.appendchild(tr); tr.innerhtml = '<td>' + data[i].id + '</td>'; tr.innerhtml += '<td>' + data[i].name + '</td>'; } alert('查找成功'); }, function () { alert('查找失败'); } );
删除数据
sql.executesql( 'delete from duxiu where id = ?', [1], // 参数 function () { alert('删除数据成功'); }, function () { alert('删除数据失败'); } );
删除表格
sql.executesql( 'drop table duxiu', [], function () { alert('删除表成功'); }, function () { alert('删除表失败'); } );
那么,是不是每个人都想过有没有删除数据库的方法呢? 反正我是想了并且去查了,答案是 没有!!!!!!!!
上一篇: CSS 让div,span等块级、非快级元素排列在同一行
下一篇: 前端 -- HTML