Chrome扩展转Firefox：如何替代chrome.storage.session实现会话存储？

Firefox目前暂未支持browser.storage.session API，针对你遇到的背景页内存变量被清除的问题，以下是几种实用的替代方案：

方案1：利用browser.storage.local加会话标记 #

通过给会话级数据添加专属标记，在浏览器启动时自动清理这类数据，模拟原生会话存储的生命周期。

代码示例： #

保存会话数据

async function saveSessionData(key, value) {
  await browser.storage.local.set({
    [key]: {
      value: value,
      isSession: true // 标记为会话级数据
    }
  });
}

读取会话数据

async function getSessionData(key) {
  const stored = await browser.storage.local.get(key);
  return stored[key]?.isSession ? stored[key].value : null;
}

浏览器启动时清理会话数据

// 监听浏览器启动事件，清除所有标记为会话级的数据
browser.runtime.onStartup.addListener(async () => {
  const allData = await browser.storage.local.get();
  const sessionKeys = Object.keys(allData).filter(k => allData[k].isSession);
  if (sessionKeys.length > 0) {
    await browser.storage.local.remove(sessionKeys);
  }
});

优点：实现简单，无需额外API；缺点：若浏览器进程被强制终止，残留数据会在下次启动时自动清理，不影响正常使用。

方案2：使用IndexedDB存储+窗口关闭清理 #

如果需要存储大容量数据，IndexedDB是更合适的选择，配合窗口关闭事件清理数据，更贴近原生会话存储的即时清理特性。

代码示例： #

初始化IndexedDB

let sessionDB;

function initSessionDB() {
  const request = indexedDB.open('ExtensionSessionDB', 1);
  
  request.onupgradeneeded = (event) => {
    sessionDB = event.target.result;
    // 创建会话数据存储对象
    sessionDB.createObjectStore('sessionStore', { keyPath: 'key' });
  };
  
  request.onsuccess = (event) => {
    sessionDB = event.target.result;
  };
}

// 扩展启动时初始化数据库
initSessionDB();

保存会话数据

function saveSessionData(key, value) {
  const transaction = sessionDB.transaction('sessionStore', 'readwrite');
  const store = transaction.objectStore('sessionStore');
  store.put({ key, value });
}

读取会话数据

function getSessionData(key, callback) {
  const transaction = sessionDB.transaction('sessionStore', 'readonly');
  const store = transaction.objectStore('sessionStore');
  const request = store.get(key);
  
  request.onsuccess = () => {
    callback(request.result ? request.result.value : null);
  };
}

窗口关闭时清理所有会话数据

// 监听所有浏览器窗口关闭事件，清空会话数据
browser.windows.onRemoved.addListener(() => {
  const transaction = sessionDB.transaction('sessionStore', 'readwrite');
  const store = transaction.objectStore('sessionStore');
  store.clear();
});

优点：支持大容量数据存储；缺点：代码复杂度较高，需处理IndexedDB的异步回调逻辑。

方案3：内存变量+storage.local缓存（适配非持久化背景页） #

如果你的扩展使用Manifest V3的非持久化服务工作者（背景页），直接用内存变量会因页面休眠丢失数据。可以将内存变量与storage.local同步，既保证读写性能，又防止数据丢失。

代码示例： #

let sessionCache = {};

// 初始化时从storage.local加载缓存
async function initSessionCache() {
  const saved = await browser.storage.local.get('sessionCache');
  sessionCache = saved.sessionCache || {};
}

// 监听消息，处理读写请求
browser.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  switch (request.type) {
    case 'save-key':
      sessionCache.key = request.value;
      // 同步到storage.local，防止背景页休眠后丢失
      await browser.storage.local.set({ sessionCache });
      sendResponse(true);
      break;
    case 'get-key':
      sendResponse(sessionCache.key || null);
      break;
  }
});

// 浏览器启动时清空缓存
browser.runtime.onStartup.addListener(async () => {
  await browser.storage.local.remove('sessionCache');
  sessionCache = {};
});

// 扩展启动时初始化缓存
initSessionCache();

优点：读写速度快，适配非持久化背景页；缺点：需要维护内存与存储的同步逻辑，避免数据不一致。

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