如何使用HTML5本地数据库（SQLite）实现数据本地存储(原创)

在前端开发场景中，当需要离线保存用户操作数据、缓存本地配置时，HTML5提供的本地数据库（基于SQLite实现，通称Web SQL）是一个可选方案。它允许我们在浏览器中直接操作本地数据库，完成结构化数据的存储与管理。

HTML5本地数据库核心概念

HTML5本地数据库的操作依赖openDatabase方法，该方法会返回一个数据库操作对象，后续所有表创建、数据操作都基于这个对象完成。它的核心特性如下：

• 基于SQLite实现，支持标准SQL语法
• 存储数据在用户浏览器本地，不同域名的数据库相互隔离
• 支持事务操作，保证数据操作的原子性
• 目前主流浏览器（Chrome、Safari、Edge等）仍支持，但规范已停止维护

数据库基础操作示例

1. 打开/创建数据库

使用openDatabase方法可以打开已有数据库，如果数据库不存在则会自动创建，方法接收四个参数：数据库名称、版本号、描述信息、预估大小（字节）。

// 打开名为testDB的数据库，版本1.0，描述为用户测试库，大小5MB
var db = openDatabase('testDB', '1.0', '用户测试本地数据库', 5 * 1024 * 1024);
if (db) {
    console.log('数据库打开成功');
} else {
    console.log('当前浏览器不支持Web SQL');
}

2. 创建数据表

数据库操作需要通过transaction方法开启事务，在事务回调中执行SQL语句，使用executeSql方法执行具体的SQL命令。

// 创建用户表，包含id、姓名、年龄三个字段
db.transaction(function(tx) {
    tx.executeSql(
        'CREATE TABLE IF NOT EXISTS user (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, age INTEGER)',
        [], // SQL参数，这里没有参数
        function(tx, result) {
            console.log('用户表创建成功');
        },
        function(tx, error) {
            console.log('表创建失败：' + error.message);
        }
    );
});

3. 插入数据

插入数据时可以通过参数化查询避免SQL注入问题，executeSql的第二个数组参数就是对应SQL语句中的占位符值。

// 向用户表插入一条数据
db.transaction(function(tx) {
    tx.executeSql(
        'INSERT INTO user (name, age) VALUES (?, ?)',
        ['张三', 25], // 对应SQL中的两个占位符
        function(tx, result) {
            console.log('数据插入成功，插入ID：' + result.insertId);
        },
        function(tx, error) {
            console.log('数据插入失败：' + error.message);
        }
    );
});

4. 查询数据

查询操作的结果会返回在回调的result对象中，通过rows属性可以获取所有查询到的数据行。

// 查询用户表中所有年龄大于20的用户
db.transaction(function(tx) {
    tx.executeSql(
        'SELECT * FROM user WHERE age > ?',
        [20],
        function(tx, result) {
            var rows = result.rows;
            console.log('查询到' + rows.length + '条数据');
            for (var i = 0; i < rows.length; i++) {
                console.log('用户ID：' + rows.item(i).id + '，姓名：' + rows.item(i).name + '，年龄：' + rows.item(i).age);
            }
        },
        function(tx, error) {
            console.log('数据查询失败：' + error.message);
        }
    );
});

5. 更新与删除数据

更新和删除操作同样使用executeSql执行对应的SQL语句，通过条件限定操作范围。

// 更新id为1的用户年龄为26
db.transaction(function(tx) {
    tx.executeSql(
        'UPDATE user SET age = ? WHERE id = ?',
        [26, 1],
        function(tx, result) {
            console.log('数据更新成功，影响行数：' + result.rowsAffected);
        },
        function(tx, error) {
            console.log('数据更新失败：' + error.message);
        }
    );
});

// 删除id为1的用户数据
db.transaction(function(tx) {
    tx.executeSql(
        'DELETE FROM user WHERE id = ?',
        [1],
        function(tx, result) {
            console.log('数据删除成功，影响行数：' + result.rowsAffected);
        },
        function(tx, error) {
            console.log('数据删除失败：' + error.message);
        }
    );
});

注意事项与替代方案

虽然HTML5本地数据库使用简单，但需要注意它已经不再是W3C的活跃规范，未来可能会被浏览器逐步移除支持。如果是新项目需要本地存储结构化数据，更推荐使用IndexedDB，它是不再维护但被现代浏览器广泛支持的替代方案，功能更强大，支持更大的存储容量和更复杂的查询场景。

另外，本地数据库存储的数据属于当前域名，不同域名之间无法互相访问，且用户可以通过浏览器设置清除本地存储的数据，因此不要用来存储敏感信息或需要长期稳定保存的核心业务数据。

提示：如果需要在本地测试上述代码，建议直接使用本地HTML文件在支持Web SQL的浏览器中打开，避免部分在线编辑器不支持该特性导致代码无法运行。

HTML5本地数据库SQLiteWeb_SQL本地存储前端数据持久化修改时间：2026-05-30 20:47:24