uni-app HbuilderX内置浏览器Web SQL无法写入数据

在 uni-app 开发中，使用 HBuilderX 内置浏览器进行调试时，可能会遇到 Web SQL 无法写入数据的问题。这通常是由于以下原因之一：

1. 浏览器不支持 Web SQL

• Web SQL 是一个已经被废弃的标准，现代浏览器（如 Chrome、Edge 等）可能不再支持或限制了 Web SQL 的使用。
• HBuilderX 内置浏览器可能基于 Chromium 内核，而 Chromium 内核的某些版本可能已经移除了对 Web SQL 的支持。

2. 安全限制

• 浏览器可能会对本地存储（如 Web SQL）施加安全限制，尤其是在非 HTTPS 环境下。
• 如果页面是通过 file:// 协议打开的，浏览器可能会阻止 Web SQL 的写入操作。

3. 代码问题

• 检查你的代码是否正确使用了 Web SQL API。例如，确保 openDatabase 方法调用正确，并且数据库名称、版本号和描述符都符合要求。
• 确保在写入数据之前，数据库已经成功打开。

解决方案

1. 使用 IndexedDB 替代 Web SQL

• 由于 Web SQL 已经被废弃，建议使用 IndexedDB 作为替代方案。IndexedDB 是现代浏览器支持的本地存储技术，功能更强大且更安全。
• uni-app 提供了对 IndexedDB 的支持，你可以直接使用。

const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('myStore', { keyPath: 'id' });
};

request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction('myStore', 'readwrite');
    const store = transaction.objectStore('myStore');
    store.add({ id: 1, name: 'John Doe' });
};

2. 使用 HBuilderX 的真机调试功能

• 如果内置浏览器不支持 Web SQL，可以尝试使用 HBuilderX 的真机调试功能，将应用运行在真机上。真机环境通常对 Web SQL 的支持更好。

3. 检查代码逻辑

• 确保你的 Web SQL 代码逻辑正确，例如：
  • 数据库是否成功打开？
  • 是否在正确的回调函数中执行写入操作？
  • 是否有错误处理逻辑？

const db = openDatabase('myDB', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS myTable (id unique, name)');
    tx.executeSql('INSERT INTO myTable (id, name) VALUES (1, "John Doe")');
}, function(error) {
    console.error('Transaction error: ', error);
});

4. 使用其他本地存储方案

• 如果 Web SQL 无法使用，可以考虑使用其他本地存储方案，如 localStorage 或 sessionStorage，但这些方案只适合存储少量数据。

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');