Сохранение и загрузка данных из локального хранилища 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 () сохраняет результаты, как это (извините за изображение):

По сути, он правильно сохраняет объекты, но также добавляет каждый параметр отдельно.

Итак, мои 2 вопроса:

1. Как правильно сохранить список объектов?
2. Как прочитать сохраненный список обратно, чтобы я мог перебирать каждый сохраненный объект?

EDIT:

Ожидаемый результат:

Ожидаемым результатом должен быть список / массив всех сохраненных объектов с URL-адресом в качестве идентификатора / первичного ключа (я следовал этому совету ), после чего я мог бы выполнить итерацию каждого объекта и сгенерировать предварительный просмотр HTML для каждого из них. (что-то вроде C # foreach loop).

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 мне удалось решить мои функции сохранения и загрузки, например:

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);
		}

	});
}