HTML5 Web SQL数据库 – BuildCodePro

HTML5 Web SQL数据库完全指南

小白也能懂的客户端数据库教程

什么是Web SQL数据库？

Web SQL数据库是HTML5规范中引入的一种在浏览器中存储结构化数据的方式。

它允许你在用户的浏览器中创建一个本地数据库，使用熟悉的SQL语句来操作数据。

关键特性：

使用SQLite作为底层数据库
完全在客户端运行
异步操作，不会阻塞UI
支持事务处理
适用于中小型数据存储

重要提示

Web SQL规范已不再维护，现代开发推荐使用IndexedDB。但了解Web SQL仍有价值，特别是在维护旧项目时。

核心方法与操作

打开数据库

使用openDatabase()方法创建或打开数据库：

                    var db = openDatabase(‘myDB’, ‘1.0’, ‘我的数据库’, 2 * 1024 * 1024);
                

参数说明：数据库名、版本号、描述、大小(字节)

执行事务

所有数据库操作必须在事务中执行：

                    db.transaction(function(tx) {
                      // 在这里执行SQL操作
                    });
                

执行SQL语句

在事务内部使用executeSql()方法：

                    tx.executeSql(‘CREATE TABLE IF NOT EXISTS books (id unique, title, author)’);
                

CRUD操作详解

CRUD代表创建(Create)、读取(Read)、更新(Update)和删除(Delete)

创建数据

                    tx.executeSql(‘INSERT INTO books (id, title, author) VALUES (?, ?, ?)’, 
                    [1, ‘HTML5权威指南’, ‘张三’]);
                

读取数据

                    tx.executeSql(‘SELECT * FROM books’, [], 
                      function(tx, results) {
                        // 处理结果
                      });
                

更新数据

                    tx.executeSql(‘UPDATE books SET author=? WHERE id=?’, 
                    [‘李四’, 1]);
                

删除数据

tx.executeSql(‘DELETE FROM books WHERE id=?’, [1]);

结果处理与回调

executeSql()参数详解

完整形式：

                    tx.executeSql(sqlStatement, [parameters], 
                      successCallback, errorCallback);
                

处理查询结果

在successCallback中可以访问结果：

                    function(tx, results) {
                      var len = results.rows.length;
                      for (var i = 0; i < len; i++){
                        console.log(results.rows.item(i).title);
                      }
                    }
                

错误处理

定义errorCallback处理错误：

                    function(error) {
                      console.log(‘SQL错误: ‘ + error.message);
                    }
                

实际应用场景

适合使用Web SQL的场景：

离线Web应用程序
缓存服务器数据
存储用户偏好设置
保存用户生成内容
需要复杂查询的应用

使用限制：

浏览器存储大小有限(通常5MB-50MB)
不支持所有SQL特性
仅WebKit/Blink内核浏览器支持
不再作为Web标准发展

最佳实践

安全注意事项

避免存储敏感数据
对用户输入进行消毒，防止SQL注入
使用参数化查询代替字符串拼接

性能优化

批量操作使用事务
为常用查询创建索引
限制读取大量数据
定期清理不必要的数据

数据库版本管理

当数据库结构需要变更时，通过版本号升级：

                    var db = openDatabase(‘myDB’, ‘2.0’, …);
                    db.changeVersion(‘1.0’, ‘2.0’, function(tx) {
                      tx.executeSql(‘ALTER TABLE books ADD COLUMN year INTEGER’);
                    });
                

Web SQL数据库实时演示

创建一个简单的书籍数据库并执行操作：

操作结果将显示在这里…