WebSQL 已被废弃,现代浏览器均不支持,应改用 IndexedDB:Chrome 97+ 彻底移除,Safari 仅限 WebView 且不保证兼容,Firefox 从未支持;所有 WebSQL API(openDatabase、transaction、executeSql)均已失效,需重写为 IndexedDB 异步事务操作。

WebSQL 已被废弃,现代浏览器(Chrome 97+、Firefox、Safari、Edge)均不再支持或从未完整支持,openDatabase 调用会直接抛出 SecurityError 或静默失败——别再为它写新逻辑,也别指望它能在用户设备上稳定运行。
为什么 openDatabase 突然不工作了?
这是标准演进和安全策略双重作用的结果:
- W3C 在 2010 年就停止维护 WebSQL 规范,转而推动
IndexedDB作为标准客户端数据库方案 - Chrome 从 97 版本起彻底移除 WebSQL 后端实现,调用
openDatabase会返回null或触发SecurityError: openDatabase is not supported - Safari 是唯一长期保留 WebSQL 的浏览器,但仅限于 iOS/macOS WebKit 内核的 WebView 场景(如 Cordova、Electron 旧版),且不保证未来兼容
- Firefox 从未实现 WebSQL,调用即报
ReferenceError: openDatabase is not defined
transaction 和 executeSql 还能用吗?
不能。只要 openDatabase 失败,后续所有依赖都失效:
-
db.transaction(...)会报TypeError: Cannot read property 'transaction' of null - 即使“侥幸”拿到
db对象(如在旧版 Safari 中),executeSql的回调参数(tx,results)结构也不统一,iOS 15+ 还限制了 SQL 语句长度和事务嵌套 - 没有事务回滚保障:WebSQL 的
executeSql错误不会自动终止事务,需手动检查results.rows.length和results.insertId判断是否成功
替代方案:用 IndexedDB 实现等效增删改查
不是“迁移”,而是重写。以下是最小可行封装,覆盖常见 CRUD 场景:
立即学习“前端免费学习笔记(深入)”;
const dbPromise = indexedDB.open('mydb', 1);
dbPromise.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id' });
}
};
dbPromise.onsuccess = async (e) => {
const db = e.target.result;
// 增
const addTx = db.transaction('users', 'readwrite');
addTx.objectStore('users').add({ id: 1, name: 'Alice' });
// 查
const getTx = db.transaction('users', 'readonly');
const user = await getTx.objectStore('users').get(1);
// 改
const putTx = db.transaction('users', 'readwrite');
putTx.objectStore('users').put({ id: 1, name: 'Alicia' });
// 删
const delTx = db.transaction('users', 'readwrite');
delTx.objectStore('users').delete(1);
};
注意:IndexedDB 是异步 + 事件驱动,无法像 WebSQL 那样用回调嵌套写同步风格 SQL;所有操作必须在事务内完成,且事务生命周期由浏览器控制——离开函数作用域后事务自动关闭。
如果必须兼容旧 WebSQL 代码(如遗留 Cordova App)
只能做运行时降级,不能“修复”WebSQL:
- 检测
typeof openDatabase === 'function',否则 fallback 到localStorage(仅支持字符串键值对)或内存 Map - Cordova 用户可换用
cordova-sqlite-storage插件,它在 iOS/Android 原生层模拟 WebSQL 接口,但需额外配置和原生构建 - Electron 用户应切换至
sqlite3Node.js 模块 + preload 脚本桥接,而非依赖渲染进程的 WebSQL
真正的难点不在语法转换,而在事务语义对齐:WebSQL 的自动提交 vs IndexedDB 的显式事务边界,稍不注意就会漏掉 await 或错用 objectStore 实例。











