HTML5如何借助WebSQL读取本地库数据_HTML5WebSQL取数法【备注】_技术教程

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

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）。

检查是否真有数据库存在：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
  });
});