WebSQL 的简单使用
针对 极客时间 SQL 必知必会 课程进行总结
什么是 WebSQL
我想你一定知道 Local Storage
与 Session Storag
,这些都是 H5
新增的属性,用于本地存储。存储方式为键值对的方式。
Web SQL
是前端的数据库,它也是本地存储的一种,使用 SQLite
实现,SQLite
是一种轻量级数据库,它占的空间小,支持创建表,插入、修改、删除表格数据
如何使用
以下是规范中定义的三个核心方法:
- openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
- transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
- executeSql:这个方法用于执行实际的 SQL 查询。
首先要想使用 WebSQL 首先得判断浏览器是否支持
<script type="text/javascript">
if(!window.openDatabase)
{
alert('您的浏览器不支持 WebSQL');
}
</script>
如果浏览器不支持、直接弹出提示框,否则页面不会发生任何变化
打开数据库
var db = window.openDatabase(dbname, version, dbdesc, dbsize,function() {});
openDatabase 方法中一共包括了 5 个参数,分别为数据库名、版本号、描述、数据库大小、创建回调。其中创建回调可以省略
例如创建 王者荣耀数据库
var db = openDatabase('wucai', '1.0', '王者荣耀数据库', 1024 * 1024);
事务操作
使用 transaction
对事务进行处理、执行提交、回滚操作
transaction(callback, errorCallback, successCallback);
创建数据表
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');
});
插入数据
db.transaction(function (tx) {
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10001, "钟无艳", 7000, 1760, " 战士 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10002, "张飞", 8341, 100, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10003, "牛魔", 8476, 1926, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10004, "吕布", 7344, 0, " 战士 ")');
});
查找数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM heros', [], function (tx, data) {
var len = data.rows.length;
console.log('查找到:' +len +'条记录');
console.log(data.rows);
});
});
总的来说使用 tx.executeSql
来执行操作,增删改查
下面是 极客时间这节课的课后习题,我简单实现了下 题目内容是:模糊查询,输入英雄名称,返回记录.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSQL Demo</title>
</head>
<body>
<div class="content">
<label for="name"></label>
<input id="name" type="text" name="name">
<input type="button" value="查询" onclick="query()">
</div>
<script type="text/javascript">
if(!window.openDatabase)
{
alert('您的浏览器不支持 WebSQL');
}
var db = openDatabase('wucai', '1.0', '王者荣耀数据库', 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS heros (id unique, name, hp_max, mp_max, role_main)');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10000, "夏侯惇", 7350, 1746, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10001, "钟无艳", 7000, 1760, " 战士 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10002, "张飞", 8341, 100, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10003, "牛魔", 8476, 1926, " 坦克 ")');
tx.executeSql('INSERT INTO heros (id, name, hp_max, mp_max, role_main) VALUES (10004, "吕布", 7344, 0, " 战士 ")');
msg = ' 数据表创建成功,一共插入 5 条数据';
console.log(msg);
});
function query(){
var name = document.getElementById('name').value;
var sql = 'SELECT * FROM heros where name like ?';
// 查询数据
db.transaction(function (tx) {
tx.executeSql(sql, ['%'+name+'%'], function (tx, data) {
var len = data.rows.length;
console.log('查找到:' +len +'条记录');
console.log(data.rows);
});
});
}
</script>
</body>
</html>
参考
关于极客返利
极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系,但须注明出处,注明文章来源 WebSQL 的简单使用