0

0

HTML5如何借助WebSQL读取本地库数据_HTML5WebSQL取数法【备注】

星夢妙者

星夢妙者

发布时间:2026-01-13 19:28:01

|

231人浏览过

|

来源于php中文网

原创

WebSQL 已被主流浏览器弃用,openDatabase 在 Chrome 98+、Edge 108+、Safari 16.4+ 中默认禁用,HTTP 下静默失败,跨域或非 localhost 触发 SecurityError;应迁移到 IndexedDB,其为 W3C 标准、全平台支持、异步且具备事务与索引能力。

html5如何借助websql读取本地库数据_html5websql取数法【备注】

WebSQL 已被主流浏览器弃用,openDatabase 在 Chrome 98+、Edge 108+、Safari 16.4+ 中默认禁用,且无替代 polyfill;当前无法通过标准 WebSQL API 可靠读取本地数据库。

为什么 openDatabase 现在大概率会失败

Chrome 和 Edge 从新版起将 WebSQL 标记为“deprecated”,调用 openDatabase 时控制台会输出警告,部分站点(尤其是非 localhost 或非 HTTPS)直接拒绝创建连接;Safari 虽仍支持,但仅限于 iOS/iPadOS 的 WebView 内部,且不保证长期可用。

  • HTTP 协议下(非 HTTPS)调用 openDatabase 会被静默忽略
  • localhost 以外的域名 + HTTP → SecurityError 或返回 null
  • 即使成功打开,transaction().executeSql() 查询可能因权限策略被中断

替代方案:改用 IndexedDB 读取结构化本地数据

IndexedDB 是 W3C 标准、全浏览器支持、异步、支持事务与索引,是 WebSQL 的官方继任者。迁移核心在于把 SQL 查询转为对象存储操作。

  • openDatabase('mydb', 1) → 改为 indexedDB.open('mydb', 1)
  • 建表逻辑(CREATE TABLE)→ 改为 objectStore.createIndex() 或版本升级中新建 objectStore
  • SELECT * FROM users WHERE age > 25 → 改为 index.openCursor(IDBKeyRange.lowerBound(25))
const request = indexedDB.open('mydb', 1);
request.onsuccess = function(e) {
  const db = e.target.result;
  const tx = db.transaction('users', 'readonly');
  const store = tx.objectStore('users');
  const index = store.index('age');
  const cursorRequest = index.openCursor(IDBKeyRange.lowerBound(25));
  cursorRequest.onsuccess = function(e) {
    const cursor = e.target.result;
    if (cursor) {
      console.log(cursor.value); // { name: 'Alice', age: 30 }
      cursor.continue();
    }
  };
};

如果必须兼容遗留 WebSQL 代码(极少数内网场景)

仅限已部署的老系统维护,且确认运行环境可控(如 Electron、特定版本 Chromium 嵌入式壳、或 Safari 15–16.3 的 iOS WebView)。

你好星识
你好星识

你的全能AI工作空间

下载

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

  • 检查是否真有数据库存在:if (window.openDatabase) { ... }
  • 务必捕获 error 回调,而非只依赖 success —— 失败时 transaction 可能为 undefined
  • 避免使用 INSERT OR REPLACE 等 SQLite 特有语法,它在部分旧版 WebSQL 实现中不被识别
const db = openDatabase('test', '1.0', 'test db', 2 * 1024 * 1024);
db.transaction(function(tx) {
  tx.executeSql('SELECT * FROM logs', [], function(tx, results) {
    for (let i = 0; i < results.rows.length; i++) {
      console.log(results.rows.item(i));
    }
  }, function(tx, err) {
    console.error('Query failed:', err.message); // 必须加 error handler
  });
});

WebSQL 不是“还能用但不推荐”,而是“多数环境已不可用”。真正要读本地结构化数据,IndexedDB 是唯一现实选择;任何新项目都不该再设计 WebSQL 依赖路径。

相关专题

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

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

676

2023.10.12

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

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

320

2023.10.27

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

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

346

2024.02.23

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

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

1095

2024.03.06

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

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

357

2024.03.06

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

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

675

2024.04.07

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

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

571

2024.04.29

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

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

414

2024.04.29

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

热门下载

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

精品课程

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

共46课时 | 2.9万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

CSS教程
CSS教程

共754课时 | 18.7万人学习

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

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