Get data back from object into form

Question

In a Chrome extension i save user input (checked checkboxes) - it works and looks like:

function save_checkboxes() {
    const form = document.forms['cbx'];
    const data = Object.fromEntries(new FormData(form).entries());
/*     console.log(data); */
    chrome.storage.sync.set({
        savedCheckboxes: data
    }, function () {
/*         console.log(data); */
    });
}
document.getElementById("save_checkboxes").addEventListener("click", save_checkboxes);

Than i want to restore saved data, so the user get his checked checkboxes back until doing new choice. I try it on this way:

function restore_checkboxes() {
    chrome.storage.sync.get(['savedCheckboxes'], function (entries) {
console.log(Object.entries(entries.savedCheckboxes));

/*stumble, stumble, stumble*/

    )}
    }

This console.log displays already an array with saved values, which are IDs of checked checkboxes, like on screenshot:

My question : how can i put values back into previously checked checkboxes?

Answer 1

For the case somebody needs it, there are two functions for save and restore checkboxes:

function save_checkboxes() {
    const form = document.forms['cbx'];
    const data = Object.fromEntries(new FormData(form).entries());

    chrome.storage.sync.set({
        savedCheckboxes: data
    }, function () {});
}
document.getElementById("save_checkboxes").addEventListener("click", save_checkboxes);

function restore_checkboxes() {
    chrome.storage.sync.get(['savedCheckboxes'], function (entries) {

        for (const[key, val]of Object.entries(entries.savedCheckboxes)) {

            const input = document.forms['cbx'].elements[key];
            switch (input.type) {
            case 'checkbox':
                input.checked = !!val;
                break;
            default:
                input.value = val;
                break;
            }
        }
    });
}
document.addEventListener('DOMContentLoaded', restore_checkboxes);