如何修改WebSQL数据库路径并在Ubuntu Apache服务下实现多页面跨页访问

认知澄清 #

WebSQL属于浏览器端本地存储技术，数据完全存储在访问用户的本地浏览器中，存储路径由浏览器自身管理，无法自定义存储到Apache服务端的指定路径，也不能直接从服务端访问WebSQL里的内容。

跨页面共享同一份WebSQL数据实现方法 #

要实现index.html写入数据后、mylist.html可读取同一份数据，只要满足两个页面属于同域（协议、域名、端口三者完全一致），无需额外服务端配置，直接用相同参数调用openDatabase即可操作同一个数据库实例，天然支持跨页面数据共享。

代码修正与补充 #

你现有代码存在两处明显问题：

• 建表时声明的字段为id和log，插入语句用的是id和article，字段不匹配会导致插入失败
• 直接拼接HTML内容到SQL语句中，容易触发语法错误和SQL注入风险，必须使用参数化查询

修正后的写入代码（可放在index.html） #

// 参数依次为：库名、版本号、库描述、预估存储空间
var db = openDatabase('articles', '1.0', 'Saved Articles', 2 * 1024 * 1024); 

db.transaction(function (tx) {   
  // 统一建表字段，这里示例用id、content，可按需求自行调整
  tx.executeSql('CREATE TABLE IF NOT EXISTS ARTICLES (id unique, content TEXT)');
  // 用参数化查询传入值，避免语法错误
  const insertId = 1; // 按你的实际需求替换为对应id值
  const insertContent = ac.parentNode.innerHTML;
  tx.executeSql(
    'INSERT INTO ARTICLES (id, content) VALUES (?, ?)', 
    [insertId, insertContent],
    () => console.log('数据插入成功'),
    (tx, err) => console.log('数据插入失败：', err.message)
  );
});

数据读取代码（可放在mylist.html） #

var db = openDatabase('articles', '1.0', 'Saved Articles', 2 * 1024 * 1024);

db.transaction(function (tx) {
  tx.executeSql(
    'SELECT * FROM ARTICLES', 
    [], 
    function (tx, results) {
      const recordCount = results.rows.length;
      // 遍历查询结果，可自行添加渲染到页面的逻辑
      for (let i = 0; i < recordCount; i++) {
        const record = results.rows.item(i);
        console.log(`第${i+1}条记录：id=${record.id}，内容=${record.content}`);
      }
    },
    (tx, err) => console.log('数据查询失败：', err.message)
  );
});

补充说明 #

如果你需要实现多用户共享数据、或者服务端可直接访问数据的需求，WebSQL无法满足该场景，建议替换为服务端数据库（如MySQL、PostgreSQL等），前端通过调用后端接口实现数据的读写操作。

内容的提问来源于stack exchange，提问作者Arc Official