使用IndexedDB缓存数据提升打印扫描页面响应速度

在打印扫描相关的网页应用中，经常需要加载大量表单、配置项或历史记录。每次打开页面都从服务器拉取数据，不仅慢，还浪费网络资源。尤其是在内网环境或设备性能较差时，用户等得烦躁。这时候，用 IndexedDB 缓存数据是个实用的解决办法。

为什么选 IndexedDB？

相比 localStorage，IndexedDB 能存储更多类型的数据，比如对象、数组，甚至二进制文件。打印模板、扫描记录这些结构复杂的内容，用它存起来更合适。而且它异步操作，不会卡住界面，用户体验更顺。

简单实现一个缓存流程

假设你有个打印设置页，里面包含纸张类型、边距、双面打印等选项。这些设置改动不多，但每次打开都要请求就显得多余。

可以首次加载时从接口获取，然后存进 IndexedDB。下次打开先查本地有没有缓存，有就直接用，没再走网络。

const dbPromise = indexedDB.open('PrintConfigDB', 1);

dbPromise.onupgradeneeded = function() {
  const db = dbPromise.result;
  if (!db.objectStoreNames.contains('settings')) {
    db.createObjectStore('settings', { keyPath: 'id' });
  }
};

dbPromise.onsuccess = function() {
  // 打开成功，可进行读写
};

// 保存设置
function saveSettings(data) {
  const tx = dbPromise.result.transaction('settings', 'readwrite');
  tx.objectStore('settings').put({
    id: 'print',
    value: data,
    timestamp: Date.now()
  });
  return tx.complete;
}

// 读取设置
function loadSettings() {
  return new Promise((resolve) => {
    const tx = dbPromise.result.transaction('settings', 'readonly');
    const store = tx.objectStore('settings');
    const req = store.get('print');
    req.onsuccess = () => resolve(req.result ? req.result.value : null);
  });
}

加上过期机制更稳妥

缓存不能永久有效。比如管理员更新了默认打印参数，老缓存就得刷新。可以在存数据时加个时间戳，读取时判断是否超过有效期，比如 30 分钟。

function isCacheValid() {
  const tx = dbPromise.result.transaction('settings', 'readonly');
  const store = tx.objectStore('settings');
  const req = store.get('print');
  
  return new Promise((resolve) => {
    req.onsuccess = function() {
      const record = req.result;
      if (!record) return resolve(false);
      const ageInMinutes = (Date.now() - record.timestamp) / 60000;
      resolve(ageInMinutes < 30); // 30分钟内有效
    };
  });
}

这样既保证了速度，又不会错过更新。

实际场景中的好处

想象一下，公司每天要打印上百份出库单，每台电脑打开打印页都要等几秒加载配置，一天下来累积的等待时间很可观。用了本地缓存后，点开即用，效率明显提升。扫描记录同理，查历史不用联网也能翻看。

IndexedDB 不是炫技，而是解决具体问题的工具。在打印扫描这类功能明确、数据重复性高的场景里，合理使用，能带来实实在在的流畅感。