将数据从对象返回到表单

Question

在Chrome扩展程序中，我保存了用户输入（选中的复选框）-它的工作原理如下：

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

比我想还原保存的数据，因此用户可以重新获得选中的复选框，直到进行新选择为止。我以这种方式尝试：

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

/*stumble, stumble, stumble*/

    )}
    }

此console.log已经显示了一个带有保存值的数组，这些值是已选中复选框的ID，如屏幕截图所示：

我的问题：如何将值放回到先前选中的复选框中？

Answer 1

对于有人需要的情况，有两个用于保存和恢复复选框的功能：

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