如何在file://路径下的HTML文件中存储数据？已找到Indexed DB方案

问题背景 #

在Chrome浏览器中，直接通过file://路径打开的本地HTML文件无法使用Cookie和Local Storage存储明暗模式这类状态数据。

可行方案：IndexedDB #

IndexedDB是浏览器原生提供的异步大容量本地存储方案，完全支持file://协议下的本地文件使用，且兼容性覆盖绝大多数现代浏览器（包括Chrome、Firefox、Edge等），非常适合存储明暗模式这类需要持久化的状态数据。

基础使用示例 #

以下是存储和读取明暗模式状态的极简实现：

// 打开/创建主题存储数据库
const openThemeDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('ThemeStorage', 1);
    
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      // 创建存储主题的对象仓库
      db.createObjectStore('userTheme', { keyPath: 'id' });
    };
    
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
};

// 保存明暗模式
const saveTheme = async (theme) => {
  const db = await openThemeDB();
  const tx = db.transaction('userTheme', 'readwrite');
  await tx.objectStore('userTheme').put({ id: 'default', value: theme });
  await tx.complete;
  db.close();
};

// 获取已保存的明暗模式
const getSavedTheme = async () => {
  const db = await openThemeDB();
  const tx = db.transaction('userTheme', 'readonly');
  const result = await tx.objectStore('userTheme').get('default');
  db.close();
  return result?.value || 'light'; // 默认返回浅色模式
};

调用示例：

// 存储深色模式
saveTheme('dark');

// 读取并应用主题
getSavedTheme().then(theme => {
  document.documentElement.setAttribute('data-theme', theme);
});

方案优势 #

• 完全兼容file://协议下的本地文件操作，无同源策略限制
• 异步操作不阻塞主线程，性能友好
• 存储容量远大于Local Storage，支持复杂数据结构
• 原生API无需额外依赖，主流浏览器全覆盖

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