钟文志的部落格

Appearance

HTML5 Web SQL 数据库是一项已废弃的规范，用于在用户浏览器中存储结构化数据。尽管 HTML5 标准委员会已经停止了对 Web SQL 数据库的进一步开发和推广，但许多浏览器仍然支持这一功能。开发者可以使用 SQL 查询来创建、读取、更新和删除数据库中的数据。

基本概念 ​

  1. 数据库：存储数据的容器，可以包含多个表。
  2. 表：包含特定类型数据的结构化集合。
  3. 行：表中的一条记录。
  4. 列：表中的一个字段，表示某种类型的数据。

基本操作 ​

以下是使用 Web SQL 数据库进行的一些基本操作：

1. 创建或打开数据库 ​

javascript
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
  • 'mydb' 是数据库名称。
  • '1.0' 是数据库版本。
  • 'Test DB' 是数据库描述。
  • 2 * 1024 * 1024 是数据库大小（以字节为单位）。

2. 创建表 ​

javascript
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
  • 使用 CREATE TABLE IF NOT EXISTS 创建名为 LOGS 的表，如果表不存在的话。

3. 插入数据 ​

javascript
db.transaction(function (tx) {
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
  • 使用 INSERT INTO 插入数据到 LOGS 表中。

4. 查询数据 ​

javascript
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      for (i = 0; i < len; i++) {
         console.log(results.rows.item(i).log);
      }
   }, null);
});
  • 使用 SELECT * FROM 查询 LOGS 表中的所有数据。
  • results.rows.length 获取结果的行数。
  • results.rows.item(i) 获取结果中的一行数据。

5. 更新数据 ​

javascript
db.transaction(function (tx) {
   tx.executeSql('UPDATE LOGS SET log = "updated logmsg" WHERE id = 2');
});
  • 使用 UPDATE 更新 LOGS 表中的数据。

6. 删除数据 ​

javascript
db.transaction(function (tx) {
   tx.executeSql('DELETE FROM LOGS WHERE id = 1');
});
  • 使用 DELETE FROM 删除 LOGS 表中的数据。

完整示例 ​

以下是一个完整示例，展示了如何创建数据库、表，插入、查询、更新和删除数据：

html
<!DOCTYPE html>
<html>
<head>
    <title>Web SQL Example</title>
</head>
<body>
    <h2>Web SQL Example</h2>
    <button onclick="populateDB()">Populate DB</button>
    <button onclick="queryDB()">Query DB</button>
    <button onclick="updateDB()">Update DB</button>
    <button onclick="deleteFromDB()">Delete From DB</button>

    <script>
        var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

        function populateDB() {
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
            });
        }

        function queryDB() {
            db.transaction(function (tx) {
                tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                    var len = results.rows.length, i;
                    for (i = 0; i < len; i++) {
                        console.log(results.rows.item(i).log);
                    }
                }, null);
            });
        }

        function updateDB() {
            db.transaction(function (tx) {
                tx.executeSql('UPDATE LOGS SET log = "updated logmsg" WHERE id = 2');
            });
        }

        function deleteFromDB() {
            db.transaction(function (tx) {
                tx.executeSql('DELETE FROM LOGS WHERE id = 1');
            });
        }
    </script>
</body>
</html>

注意事项 ​

  1. 已废弃：HTML5 Web SQL 数据库规范已经被废弃，建议使用 IndexedDB 作为替代方案。
  2. 浏览器兼容性：尽管许多浏览器仍支持 Web SQL，但未来可能会被完全移除。
  3. 安全性：尽量避免在客户端存储敏感数据，因为客户端数据容易被访问和修改。

尽管 Web SQL 数据库提供了强大的客户端数据存储功能，但由于其被废弃的状态和未来的不可预测性，开发者应考虑使用更现代和支持更广泛的客户端存储技术，如 IndexedDB。