0

0

HTML5框架WebSQL怎么操作_本地数据库增删改查方法【详解】

絕刀狂花

絕刀狂花

发布时间:2026-01-06 18:09:09

|

211人浏览过

|

来源于php中文网

原创

websql 已被废弃,现代浏览器均不支持,应改用 indexeddb:chrome 97+ 彻底移除,safari 仅限 webview 且不保证兼容,firefox 从未支持;所有 websql api(opendatabase、transaction、executesql)均已失效,需重写为 indexeddb 异步事务操作。

html5框架websql怎么操作_本地数据库增删改查方法【详解】

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

transactionexecuteSql 还能用吗?

不能。只要 openDatabase 失败,后续所有依赖都失效:

  • db.transaction(...) 会报 TypeError: Cannot read property 'transaction' of null
  • 即使“侥幸”拿到 db 对象(如在旧版 Safari 中),executeSql 的回调参数(tx, results)结构也不统一,iOS 15+ 还限制了 SQL 语句长度和事务嵌套
  • 没有事务回滚保障:WebSQL 的 executeSql 错误不会自动终止事务,需手动检查 results.rows.lengthresults.insertId 判断是否成功

替代方案:用 IndexedDB 实现等效增删改查

不是“迁移”,而是重写。以下是最小可行封装,覆盖常见 CRUD 场景:

Grammarly
Grammarly

Grammarly是一款在线语法纠正和校对工具,伟大的AI辅助写作工具

下载

立即学习前端免费学习笔记(深入)”;

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 用户应切换至 sqlite3 Node.js 模块 + preload 脚本桥接,而非依赖渲染进程的 WebSQL

真正的难点不在语法转换,而在事务语义对齐:WebSQL 的自动提交 vs IndexedDB 的显式事务边界,稍不注意就会漏掉 await 或错用 objectStore 实例。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

1133

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

381

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

2152

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

380

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

1663

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

585

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

440

2024.04.29

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

22

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

AngularJS教程
AngularJS教程

共24课时 | 4.1万人学习

CSS教程
CSS教程

共754课时 | 41.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号