点击按钮将字符串存入IndexedDB的实现及问题排查

原有代码问题说明 #

你之前功能无法生效的核心原因是错误将数据存储逻辑放在了onupgradeneeded回调中：

onupgradeneeded 事件仅会在数据库首次创建、传入的数据库版本号高于本地已存版本时触发，仅适合用来初始化对象存储、索引等数据库结构，日常的增删改查业务逻辑不能写在这个回调里。

实现思路 #

• 数据库连接成功后缓存实例，避免每次操作都重复发起开库请求
• 单独封装数据写入方法，写入时主动开启读写事务完成数据提交
• 页面加载完成后提前初始化数据库，按钮点击时直接调用写入方法存储目标字符串

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>IndexedDB存储示例</title>
</head>
<body>
  <button onclick="saveStringToDB('HelloWorld')">Store HelloWorld</button>

  <script>
    // 全局缓存数据库实例
    let dbInstance = null;
    // 数据库配置常量
    const DB_CONFIG = {
      name: 'demoDB',
      version: 1,
      storeName: 'wdesk'
    };

    // 初始化数据库
    function initDB() {
      const openRequest = indexedDB.open(DB_CONFIG.name, DB_CONFIG.version);

      // 仅在版本升级/首次创建时执行结构初始化
      openRequest.onupgradeneeded = (e) => {
        const db = e.target.result;
        if (!db.objectStoreNames.contains(DB_CONFIG.storeName)) {
          // 创建对象存储，设置自增主键
          db.createObjectStore(DB_CONFIG.storeName, { 
            keyPath: 'id', 
            autoIncrement: true 
          });
        }
        console.log('数据库结构初始化完成');
      };

      openRequest.onsuccess = (e) => {
        dbInstance = e.target.result;
        console.log('数据库连接成功');
        // 全局监听数据库操作错误
        dbInstance.onerror = (err) => console.error('数据库操作异常：', err);
      };

      openRequest.onerror = (e) => console.error('数据库打开失败：', e.target.error);
    }

    // 存储字符串到IndexedDB
    function saveStringToDB(targetStr) {
      if (!dbInstance) {
        alert('数据库尚未加载完成，请稍后重试');
        return;
      }
      // 开启读写事务
      const transaction = dbInstance.transaction(DB_CONFIG.storeName, 'readwrite');
      const store = transaction.objectStore(DB_CONFIG.storeName);
      // 提交写入请求，附带创建时间方便后续查询区分
      const saveRequest = store.add({
        content: targetStr,
        createTime: new Date().toLocaleString()
      });

      saveRequest.onsuccess = () => {
        console.log(`字符串「${targetStr}」存储成功，记录ID：${saveRequest.result}`);
        alert('存储成功！');
      };

      saveRequest.onerror = () => console.error('存储失败：', saveRequest.error);
    }

    // 页面加载完成后初始化数据库
    window.addEventListener('DOMContentLoaded', initDB);
  </script>
</body>
</html>

关键说明 #

• 上述代码默认用自增数字作为主键，存储的内容会带上创建时间；如果需要直接存纯字符串，可以修改对象存储创建逻辑，去掉keyPath配置，写入时传入自定义key即可，例如store.add(targetStr, 'my_custom_key')
• add方法遇到同key数据会报错，put方法遇到同key数据会覆盖，可根据业务场景选择
• IndexedDB所有操作都是异步执行，需要在对应成功/失败回调中处理后续逻辑，不能用同步写法等待结果

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