如何使用Google Chrome Storage API保存用户输入数组并在另一页面打印？

我明白你需要把用户输入的标题和URL分别存进数组，之后在另一个页面调取并展示这些数据。下面一步步给你落地实现方案：

第一步：配置扩展权限 #

首先，你的Chrome扩展必须在manifest.json里声明storage权限，不然Chrome会阻止你使用这个API。打开你的manifest.json，添加如下配置：

{
  "manifest_version": 3, // 如果你用的是Manifest V2，改成2即可
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["storage"],
  // 其他扩展配置...
}

第二步：编写保存数据的代码 #

在用户输入页面（比如popup.html或者自定义的内容脚本），你可以这样获取输入并保存到Chrome Storage：

// 获取用户输入的标题和链接（你之前做了encode，这里可以选择存解码后的原始值，后续使用更方便）
const title = document.getElementById('title').value;
const url = document.getElementById('url').value;

// 先从Storage读取已有的数组（如果没有就初始化空数组）
chrome.storage.local.get(['savedTitles', 'savedUrls'], (result) => {
  const updatedTitles = result.savedTitles || [];
  const updatedUrls = result.savedUrls || [];

  // 把新的标题和链接加入数组
  updatedTitles.push(title);
  updatedUrls.push(url);

  // 将更新后的数组存回Storage
  chrome.storage.local.set({
    savedTitles: updatedTitles,
    savedUrls: updatedUrls
  }, () => {
    // 保存成功后的提示，可选
    alert('数据已保存！');
  });
});

如果你更喜欢用async/await（代码更简洁直观），也可以写成这样：

async function saveUserInput() {
  const title = document.getElementById('title').value;
  const url = document.getElementById('url').value;

  // 读取现有存储的数据
  const result = await chrome.storage.local.get(['savedTitles', 'savedUrls']);
  const updatedTitles = result.savedTitles || [];
  const updatedUrls = result.savedUrls || [];

  // 添加新输入的数据
  updatedTitles.push(title);
  updatedUrls.push(url);

  // 保存回Storage
  await chrome.storage.local.set({
    savedTitles: updatedTitles,
    savedUrls: updatedUrls
  });

  alert('数据保存成功！');
}

// 给保存按钮绑定点击事件
document.getElementById('saveBtn').addEventListener('click', saveUserInput);

第三步：在另一个页面读取并展示数据 #

在需要展示数据的页面（比如options.html或者另一个弹窗页面），可以这样读取并渲染数据：

// 从Storage读取保存的数组
chrome.storage.local.get(['savedTitles', 'savedUrls'], (result) => {
  const titles = result.savedTitles || [];
  const urls = result.savedUrls || [];

  // 获取页面上用来展示数据的容器
  const dataContainer = document.getElementById('dataContainer');

  // 遍历数组，把每一组标题和链接渲染到页面
  for (let i = 0; i < titles.length; i++) {
    const item = document.createElement('div');
    item.innerHTML = `
      <p><strong>标题:</strong> ${titles[i]}</p>
      <p><strong>链接:</strong> <a href="${urls[i]}" target="_blank">${urls[i]}</a></p>
      <hr>
    `;
    dataContainer.appendChild(item);
  }
});

同样，用async/await的版本：

async function loadSavedData() {
  const result = await chrome.storage.local.get(['savedTitles', 'savedUrls']);
  const titles = result.savedTitles || [];
  const urls = result.savedUrls || [];

  const dataContainer = document.getElementById('dataContainer');
  dataContainer.innerHTML = ''; // 先清空容器

  titles.forEach((title, index) => {
    const url = urls[index];
    const item = document.createElement('div');
    item.className = 'saved-item';
    item.innerHTML = `
      <h3>${title}</h3>
      <a href="${url}" target="_blank">访问链接</a>
    `;
    dataContainer.appendChild(item);
  });
}

// 页面加载完成后自动读取数据
window.addEventListener('DOMContentLoaded', loadSavedData);

一些实用提醒 #

• Chrome Storage分local和sync两种：local是本地存储，仅存在当前浏览器；sync会同步到用户的Chrome账号，在其他登录了同一账号的设备上也能看到。你可以根据需求选择，上面的例子用的是local。
• 存储的数据是永久保留的，除非用户手动清除浏览器数据，或者你调用chrome.storage.local.remove()/clear()主动删除。
• 一定要注意异步操作：Chrome Storage的API都是异步的，必须用回调或者async/await处理，不要在同步代码里直接拿结果，否则会得到undefined。

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