Web SQL vs IndexedDB：客户端数据库操作指南（十一）

admin
数据库
9小时前
5热度
0评论

在现代 Web 开发中，客户端存储变得越来越重要。虽然 Web SQL 数据库曾经是主流选择，但由于其已被废弃，现在更多开发者倾向于使用 IndexedDB。本文将详细介绍如何使用 Web SQL 和 IndexedDB 进行客户端数据库操作，包括创建数据库、插入数据、查询数据、更新数据和删除数据。

Web SQL 数据库简介

Web SQL 数据库 API 虽然已经被废弃，但在某些老旧浏览器中仍然有支持。它允许开发者使用 SQL 语法在客户端进行数据库操作。尽管不推荐使用，了解其基本操作仍然是有益的。

核心方法

Web SQL 数据库 API 提供了三个核心方法：

openDatabase：用于打开或创建数据库。
transaction：用于控制事务，执行提交或回滚。
executeSql：用于执行实际的 SQL 查询。

打开数据库

使用 openDatabase 方法可以打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。以下是一个示例：

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

openDatabase 方法的参数说明：

数据库名称：例如 'mydb'。
版本号：例如 '1.0'。
描述文本：例如 'Test DB'。
数据库大小：例如 2 1024 1024（2MB）。
创建回调：可选参数，当创建数据库后会被调用。

执行查询操作

使用 transaction 方法可以控制事务，并在事务中执行 SQL 查询。以下是一个创建表的示例：

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

插入数据

在创建表后，可以使用 executeSql 方法插入数据。以下是一个插入静态数据的示例：

db.transaction(function(tx) {
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

也可以使用动态值插入数据：

db.transaction(function(tx) {
    var e_id = 3, e_log = "动态插入";
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)', [e_id, e_log]);
});

读取数据

使用 executeSql 方法可以查询数据库中的数据。以下是一个查询数据的示例：

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

删除记录

使用 executeSql 方法可以删除数据库中的记录。以下是一个删除记录的示例：

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

也可以使用动态值删除记录：

db.transaction(function(tx) {
    var id = 2;
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新记录

使用 executeSql 方法可以更新数据库中的记录。以下是一个更新记录的示例：

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log="www.w3cschool.cc" WHERE id=2');
});

也可以使用动态值更新记录：

db.transaction(function(tx) {
    var id = 2, newLog = "www.w3cschool.cc";
    tx.executeSql('UPDATE LOGS SET log=? WHERE id=?', [newLog, id]);
});

IndexedDB 简介

IndexedDB 是一种基于浏览器的 NoSQL 数据库，用于在客户端持久化存储大量结构化数据。它支持事务、键值对存储、索引和复杂查询操作，非常适合需要存储大量结构化数据的应用程序。

IndexedDB 特性

键值对存储：数据以键值对的形式存储在对象存储（object store）中。
事务支持：所有数据操作必须在事务内完成，以确保数据一致性和完整性。
异步 API：所有操作都是异步的，不会阻塞 UI 线程，使用事件回调或 Promises 来处理结果。
版本控制：数据库使用版本号来管理数据库的架构（如创建或修改对象存储）。
索引：支持对数据的字段建立索引，以加快查询速度。
离线支持：数据可以持久化存储并在断网情况下继续访问，非常适合构建离线 Web 应用。

IndexedDB 方法

以下是一些常用的 IndexedDB 方法：

indexedDB.open：用于打开现有数据库或创建新数据库。
db.createObjectStore：在 onupgradeneeded 事件中创建对象存储（类似表）。
objectStore.add：在事务中向对象存储中添加数据。
objectStore.get：根据键值从对象存储中获取数据。
objectStore.put：更新现有记录，若记录不存在则插入。
objectStore.delete：根据键值删除记录。
db.transaction：创建事务，指定对象存储名称和事务模式（readonly 或 readwrite）。
objectStore.createIndex：为对象存储中的字段创建索引，以便更快的查询。

IndexedDB 应用实例

以下是一个完整的 IndexedDB 实例，用于创建数据库、插入数据、查询数据并更新数据。

// 打开或创建数据库
var request = indexedDB.open('myDatabase', 1);

// 如果数据库版本变化或首次创建时触发
request.onupgradeneeded = function(event) {
    var db = event.target.result;

    // 创建对象存储（表），设置主键为 'id'
    var objectStore = db.createObjectStore('customers', { keyPath: 'id' });

    // 为 'name' 字段创建索引
    objectStore.createIndex('name', 'name', { unique: false });
};

// 打开数据库成功
request.onsuccess = function(event) {
    var db = event.target.result;

    // 插入数据
    var transaction = db.transaction(['customers'], 'readwrite');
    var objectStore = transaction.objectStore('customers');

    objectStore.add({ id: 1, name: 'John Doe', email: 'john@example.com' });
    objectStore.add({ id: 2, name: 'Jane Doe', email: 'jane@example.com' });

    transaction.oncomplete = function() {
        console.log('Transaction completed: data added.');
    };

    transaction.onerror = function(event) {
        console.error('Transaction failed:', event);
    };

    // 查询数据
    var queryTransaction = db.transaction(['customers'], 'readonly');
    var queryObjectStore = queryTransaction.objectStore('customers');

    var request = queryObjectStore.get(1);
    request.onsuccess = function(event) {
        console.log('Customer:', event.target.result);
    };

    // 更新数据
    var updateTransaction = db.transaction(['customers'], 'readwrite');
    var updateObjectStore = updateTransaction.objectStore('customers');

    var request = updateObjectStore.put({ id: 1, name: 'John Updated', email: 'john@example.com' });
    request.onsuccess = function(event) {
        console.log('Customer updated successfully.');
    };
};

总结

本文详细介绍了如何使用 Web SQL 和 IndexedDB 进行客户端数据库操作。虽然 Web SQL 已被废弃，但了解其基本操作有助于理解早期的客户端存储技术。而 IndexedDB 作为现代浏览器的标准，提供了更强大和灵活的客户端存储解决方案。通过本文的示例，你可以轻松上手这两种技术，为你的 Web 应用程序添加强大的客户端存储功能。