讲师中心 微信公众号
AI工具推荐 视频效率加速

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

大浩大大_4508

大浩大大_4508

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

|

231人浏览过

|

来源于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

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 场景:

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

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

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 实例。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

相关专题

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

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

4783

2023.10.12

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

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

971

2023.10.27

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

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

1249

2024.02.23

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

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

6801

2024.03.06

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

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

3503

2024.03.06

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

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

6780

2024.04.07

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

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

9421

2024.04.29

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

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

1270

2024.04.29

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

20

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 237人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn