HTML5 关于Web SQL 数据库的学习

2023-11-08 23:13•html•阅读 4792

1.什么是Web SQL 数据库？

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

核心方法

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询

（1）首先使用openDatabase函数创建一个本地数据库，如果已经创建，就不会重复创建，而是打开

 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,success);
 if (!db) 
{
  alert("数据库创建失败！");
} else
{
alert("数据库创建成功！");
}

注意：

mydb为创建数据库名称
1.0为版本号
Test DB为描述文件
2*1024*1024为数据库大小
success是回调函数，创建成功后会执行一次
创建的数据库在Google\Chrome\User Data\Default\databases文件夹下
创建的是一个sqllite数据库，可以用SQLiteSpy打开文件，可以看到里面的数据。SQLiteSpy是一个绿色软件，可以百度一下下载地址或SQLiteSpy官方下载：SQLiteSpy。
暂时没提供删除数据库的api
清除缓存后数据库就会被删除
（2）创建表

 db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS User (text, password)');
    });

（3）增加数据

function Save()
    {
        db.transaction(function (tx) {
            tx.executeSql('INSERT INTO User (text, password) VALUES ("' + document.getElementById("ipttext").value + '", "' + document.getElementById("iptpwd").value + '")');
        });
    }

（4）修改数据

 function Update()
    {
        db.transaction(function (tx) {
            tx.executeSql('UPDATE User set password="'+document.getElementById("iptpwd").value+'" where text=?', [document.getElementById("ipttext").value]);
        });
    }

注意：？号好像只能可以用一次,以下这种执行不成功，不知道为啥

tx.executeSql('UPDATE User set password=? where text=?',[document.getElementById("iptpwd").value], [document.getElementById("ipttext").value]);

还有[]号必须有，要不也不成功


（5）删除数据

function Delete()
    {
        db.transaction(function (tx) {
            tx.executeSql('DELETE FROM User WHERE text=?',[document.getElementById("ipttext").value]);
        });

    }

总结：作为本地简单存储还可以用，不太完善，特定场景可以使用

其他例子：https://blog.csdn.net/qq_Shu/article/details/92840510

其他资料：https://www.jb51.net/html5/65058.html