WebSQL 的简单使用

作者：很楠不爱3 | 2024-04-28 20:56:25

踩

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>

参考

WebSQL：如何在H5中存储一个本地数据库

HTML5 Web SQL 数据库

关于极客返利

极客返利是由我个人开发的一款网课返利、返现平台。包含极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。简而言之就是：你买课，我返现。让你花更少的钱，就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用知识共享署名 4.0 国际许可协议进行许可。
转载无需与我联系，但须注明出处，注明文章来源 WebSQL 的简单使用

联系我

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/504280