Chrome扩展开发：如何在Chrome Storage中存储并单独获取多个对象

Hey there! I see exactly where you're stuck—your current code keeps overwriting the same name and URL keys each time you call chrome.storage.sync.set(), which is why only the last item shows up. Let's fix this with a couple of practical approaches depending on your needs:

方法1：将所有对象存储为一个数组（推荐，适合大多数场景） #

这种方式把API返回的整个数组作为单个值存在Chrome Storage里，管理起来更简单，也不会出现键冲突。

存储数据 #

先把API返回的数组直接存进去：

// 假设apiData是你从API获取到的data数组
const apiData = [ { name:"XYZ", URL:"xyz.com" }, { name:"ABC", URL:"abc.com" } ];

chrome.storage.sync.set({ savedItems: apiData }, () => {
  console.log("所有数据已成功存储");
});

获取数据 #

要拿到所有数据，直接读取这个数组即可；如果要找单个对象，用数组方法筛选：

// 获取所有存储的项目
chrome.storage.sync.get(['savedItems'], (result) => {
  if (result.savedItems) {
    console.log("全部存储项目：", result.savedItems);

    // 单独获取name为XYZ的项目
    const targetItem = result.savedItems.find(item => item.name === "XYZ");
    console.log("XYZ项目详情：", targetItem);
  }
});

方法2：为每个对象设置唯一键（适合需要快速查找单个对象的场景） #

如果确实需要每个对象作为独立的存储项，你得给每个对象分配一个唯一的键（比如用name作为键，前提是name不会重复；或者生成唯一ID）。

存储数据 #

遍历API返回的数组，逐个存储每个对象：

const apiData = [ { name:"XYZ", URL:"xyz.com" }, { name:"ABC", URL:"abc.com" } ];

apiData.forEach(item => {
  // 用item.name作为唯一键存储整个对象
  chrome.storage.sync.set({ [item.name]: item }, () => {
    console.log(`已存储项目：${item.name}`);
  });
});

获取数据 #

• 获取单个对象：直接指定对应的键

chrome.storage.sync.get(['XYZ'], (result) => {
  console.log("XYZ项目：", result.XYZ);
});

• 获取所有对象：读取全部存储内容，再过滤出你的项目

chrome.storage.sync.get(null, (result) => {
  // 过滤出包含name和URL属性的对象（排除其他无关存储项）
  const allItems = Object.values(result).filter(item => item.name && item.URL);
  console.log("所有存储的项目：", allItems);
});

为什么你的原代码不行？ #

Chrome Storage的set方法会覆盖相同键的值。你两次调用set都用了name和URL这两个键，第二次的赋值直接替换了第一次的，所以最后只能拿到最后一组数据。

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