Chrome.storage для приложения Chrome "Новая вкладка";запоминание флажков

Question

Я довольно новичок в программировании, но хочу учиться.Я пытаюсь создать приложение, которое отслеживает цели (мне не понравились те, которые я нашел, поэтому я хочу сделать свои).В любом случае, необходимо установить флажки, и когда я открою новую вкладку на более позднем этапе, я хочу установить флажки.Вот небольшой фрагмент моего кода:

<label class="container">Drink 2 liters of water
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

Как я могу использовать функцию chrome.storage, чтобы запомнить, что я нажал на это поле ?.Спасибо за вашу помощь!

Answer 1

На высоком уровне вы захотите использовать chrome.storage для сохранения изменений при каждом нажатии флажка или при нажатии кнопки.

Если выЖелая сохранять каждый раз при нажатии на флажок, вы будете привязывать слушателя к событию изменения флажков.Затем вызовите chrome.storage для сохранения.

document.querySelectorAll('input[type="checkbox"]').forEach(elem=>{ //Get all input checkboxes
    elem.addEventListener('change',(event)=>{ //Add a change listener
        const key = event.target.name; //get the name value from the input element
        const value = event.target.checked; // has it been checked?
        chrome.storage.local.set({[key]: value}, ()=>  { //save it
            console.log('Value is set to ' + value);
        });
    })
})

Сохранение при нажатии кнопки будет аналогичным.Вы будете привязывать прослушиватель щелчков к кнопке, а затем в обратном вызове установите все флажки и зациклите их для сохранения.

Когда страница загружена, вам нужно будет извлечь все сохраненные значенияи установите состояние проверки.

chrome.storage.local.get(['goal1','goal2'],(results)=>{ //Fetch goal1, goal2, goalN... from chrome.storage
    //.get returns a keyed object you can loop over.
    Object.keys(results).forEach((goal)=>{ 
        //Set the check state of each goal.
        document.querySelector(`input[name="${goal}"]`).checked = results[goal];
    })
})