javascript - 从 Chrome 本地存储保存和加载数据

Question

我知道有很多类似的问题和答案，但请耐心听我讲这个。 我对 Javascript 不太熟练，需要两件事方面的帮助。

我正在开发一个 Chrome 扩展程序，它可以从网上商店页面提取一些数据(产品名称、价格、描述...)。

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

var product = { image: "", name: "", description: "", price: "", url: "" };
product.image = "productImage";
product.name = "productName";
product.description = "productDescription";
product.price = "productPrice";

Save(product);

function Save(productValues) {
    productValues[document.URL] = productValues;
    chrome.storage.local.set(productValues, function() { /*...*/ });
}

保存数据后，我尝试像这样读取它:

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

这工作正常，但 Save() 保存的结果如下(抱歉图像):

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

所以我的两个问题是:

1. 如何正确保存对象列表？
2. 如何读回已保存的列表，以便我可以迭代每个已保存的对象？

编辑:

预期结果:

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

https://www.instar.hr/gopro-hero7...:
    description: "desc go pro"
    image: "https://..."
    name: "GoPro Hero 7"
    price: "3.156"
    url: "https://www.instar.hr/gopro-hero7..."
https://www.instar.hr/podloga-za-mis...:
    description: "desc podloga"
    image: "https://..."
    name: "Podloga za mis"
    price: "13,85"
    url: "https://www.instar.hr/podloga-za-mis..."

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

var product = { image: "", name: "", description: "", price: "", url: "" };
var productUrl;

function FindElements() {
    // get opened page domain
    var domain = window.location.hostname;

    var productImage;
    var productName;
    var productDescription;
    var productPrice;

    productUrl = document.URL;
    product.url = productUrl;

    if (domain === "www.instar-informatika.hr") {

        try {
            productImage = document.getElementsByClassName('productimage clearfix')[0].children[0].children[0].childNodes[0].currentSrc;
        } catch (error) {
            productImage = "";
        }

        try {
            productName = document.getElementsByClassName('productname clearfix')[0].innerText;
        } catch (error) {
            productName = "";
        }

        try {
            productDescription = document.getElementsByClassName('oblorub obloopis')[0].innerText;
        } catch (error) {
            productDescription = "";
        }

        try {
            productPrice = document.getElementsByClassName('productpageprice')[0].innerText;
        } catch (error) {
            productPrice = "";
        }

        product.image = productImage;
        product.name = productName;
        product.description = productDescription;
        product.price = productPrice;

        console.log(product);
        Save(product);
        Load();
    }

    else {
        window.alert("Sorry, current page currently not supported.")
    }
}

function Save(productValues) {
    var key = productValues[location.href];
    chrome.storage.local.set({[key]:productValues});
}

function Load() {
	chrome.storage.local.get(null, function (items) {
		console.log(items);
  }
         
         
FindElements();
Load();

//After load, I need to do something like:
// foreach (product in items){
//    var htmlString =
//    "<h1>" + product.name + "</h1>" +
//    "<h1>" + product.description + "</h1>"
//    etc...
//    }

Answer 1

您希望存储是一个以 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)

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

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

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