Question

我知道有很多类似的问题和答案，但是请耐心等待。我对Java语言不是很熟练，需要两点帮助。

我正在使用一个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（）保存类似这样的结果（对不起，该图片）：

基本上，它可以正确保存对象，但也可以分别添加每个参数。

所以我的两个问题是：

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

编辑：

预期结果：

预期结果应该是所有已保存对象的列表/数组，并将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);
};

Answer 2

在@Anatsu的帮助下，我设法解决了这样的Save and Load函数：

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

function Load() {
	chrome.storage.local.get(null, function (items) {

		for (var key in items) {
			console.log(items[key].image);
			console.log(items[key].name);
			console.log(items[key].price);
      console.log(items[key].description);
		}

	});
}

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

2 个答案: