Chrome扩展调用chrome.storage.local.set()更新本地存储出现异常结果

问题原因 #

1. 存储数据提取错误：调用chrome.storage.local.get('storedGroupsData')后，返回的是一个以storedGroupsData为键的外层对象，而非实际的分组数据对象。你直接将该返回值赋值给storedGroupsData，导致后续操作的是外层对象，而非目标分组数据。
2. 重复执行存储操作：代码中连续执行了两次chrome.storage.local.set，第二次存储时，storedGroupsData已经被错误修改为包含新分组和嵌套结构的对象，最终导致存储数据出现重复嵌套的异常结构。

修正后的代码 #

import getTabData from "./getTabData.js";

const createGroup = async (selectedTabs, groupName) => {
  const groupData = [];
  let storedGroupsData;

  try {
    // 正确提取存储中的分组数据
    const result = await chrome.storage.local.get('storedGroupsData');
    // 若存储中无数据，初始化空对象；否则取实际的分组数据
    storedGroupsData = result.storedGroupsData || {};
    console.log(storedGroupsData);
  } catch (err) {
    console.error(err);
    // 异常时初始化空对象，避免后续操作报错
    storedGroupsData = {};
  }

  // 收集标签页数据
  for (const tabId of selectedTabs) {
    const tabInfo = await getTabData(tabId, groupName);
    groupData.push(tabInfo);
  }

  // 更新分组数据并保存
  try {
    // 在原分组数据基础上添加新分组
    const updatedGroupsData = { ...storedGroupsData, [groupName]: groupData };
    console.log(updatedGroupsData);
    // 仅执行一次存储操作，将更新后的分组数据存入storedGroupsData键下
    await chrome.storage.local.set({ storedGroupsData: updatedGroupsData });
  } catch (err) {
    console.error(err);
  }
};

export default createGroup;

关键改动说明 #

• 正确提取数据：通过result.storedGroupsData获取实际的分组数据对象，而非直接使用get的返回值。
• 移除重复存储：删除了第二次多余的set操作，仅保留一次有效的存储更新，确保数据结构正确。
• 异常兜底：在捕获到存储读取异常时，初始化storedGroupsData为空对象，避免后续操作因变量未定义报错。

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