Javascript 从chrome本地存储器保存和加载数据

我知道有很多类似的问题和答案，但请在这一点上容忍我。 我不是很精通Javascript，需要两方面的帮助

我正在开发一个Chrome扩展，它可以从网上商店的页面中提取一些数据（产品名称、价格、说明…）

提取所需数据后，我将其保存如下：

var-product={image:，name:，description:，price:，url:}；
product.image=“productImage”；
product.name=“productName”；
product.description=“productDescription”；
product.price=“productPrice”；
保存（产品）；
函数保存（productValues）{
productValues[document.URL]=productValues；
chrome.storage.local.set（productValues，function（）{/*…*/}）；
}

保存数据后，我尝试这样读取：

chrome.storage.local.get（null，函数（项）{
console.log（项目）；}

这可以正常工作，但Save（）会像这样保存结果（对不起，图像）：

基本上，它可以正确地保存对象，但也可以单独添加每个参数

所以我的两个问题是：

如何正确保存对象列表

如何读回保存的列表，以便迭代每个保存的对象

编辑：

预期结果：

预期结果应该是所有保存对象的列表/数组，URL作为标识符/主键（我遵循），然后我可以迭代每个对象并为每个对象生成HTML预览（类似于C#foreach循环）

编辑2： 我正在使用的代码：

var-product={image:，name:，description:，price:，url:}；
var-productUrl；
函数FindElements（）{
//打开网页域
var domain=window.location.hostname；
var-productImage；
var产品名称；
var产品描述；
var产品价格；
productUrl=document.URL；
product.url=productUrl；
如果（域==“www.instar-informatika.hr”）{
试一试{
productImage=document.getElementsByClassName（'productImage clearfix'）[0]。子项[0]。子项[0]。子项节点[0]。currentSrc；
}捕获（错误）{
productImage=“”；
}
试一试{
productName=document.getElementsByClassName（'productName clearfix'）[0]。innerText；
}捕获（错误）{
productName=“”；
}
试一试{
productDescription=document.GetElementsByCassName（'oblorub obloopis'）[0]。innerText；
}捕获（错误）{
productDescription=“”；
}
试一试{
productPrice=document.getElementsByClassName（'productpageprice'）[0]。innerText；
}捕获（错误）{
productPrice=“”；
}
product.image=productImage；
product.name=productName；
product.description=产品描述；
product.price=产品价格；
控制台日志（产品）；
保存（产品）；
加载（）；
}
否则{
window.alert（“对不起，当前页面当前不受支持。”）
}
}
函数保存（productValues）{
var key=productValues[location.href]；
chrome.storage.local.set（{[key]：productValues}）；
}
函数加载（）{
chrome.storage.local.get（null，函数（项）{
控制台日志（项目）；
}
FindElements（）；
加载（）；
//加载后，我需要执行以下操作：
//foreach（项目中的产品）{
//var htmlString=
//“”+product.name+“”+
//“”+product.description+“”
//等等。。。
//}

是否希望存储将是以URL为主键的对象集合

function Save(productValues) {
 const key = productValues[URL]

 chrome.storage.local.set({[key]:productValues});
}

下面的产品参数必须表示您选择的对象 要保存在chrome.storage中吗

     Save(product);

现在输入URL以获取对象

chrome.storage.local.get(yourUrl, function (items) {
 console.log(items);
};

但如果你问我，你最好把它保存在“描述”下，因为我看到它的值是重复的（Opis Artikla）

---

在@Anatsu的帮助下，我成功地解决了如下保存和加载功能：

函数保存（productValues）{
var key=location.href；
chrome.storage.local.set（{[key]：productValues}）；
}
函数加载（）{
chrome.storage.local.get（null，函数（项）{
对于（var输入项）{
console.log（项[key].image）；
console.log（项[key].name）；
console.log（items[key].price）；
console.log（项[key].description）；
}
});
}

您可以编辑和添加预期结果吗？我不确定您的示例中哪些键是正确的，哪些是不需要的。1）删除“productValues[document.URL]=productValues”；2）chrome.storage.local.set（{[document.URL]：productValues}，正是我教的，他只指向URL键。但我不确定这是他想要的，在他的例子中，我也看到了“价格”、“名称”以及其他不是对象外部url的键。@Anatsu我编辑了问题并添加了结果示例。我希望现在更清楚。如果不是，请说，我将尝试更好地解释。在我输入“const key=productValues[document.url]”后，它说键未定义：“键未定义”因此，它只是每次更新相同的记录。而不是Document.URL try location.href。它仍然说“key未定义”。URL被正确读取，但key不会得到值。请

console.log（productValues）

在

save（）的顶部

函数的作用域，并告诉我打印的内容。我看不到整个对象，可能是指向codepen的链接？

chrome.storage.local.get(yourUrl, function (items) {
 console.log(items);
};

 function Save(productValues) {
  const key = productValues['description']

  chrome.storage.local.set({[key]:productValues});
}

chrome.storage.local.get('Opis Artikla', function (items) {
 console.log(items);
};