Сохранить значение флажка, расположенного во всплывающем окне, когда пользователь закрывается из всплывающего окна

Question

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

Я пытался добавить (из background.js) атрибут «флажок» к флажку в popup.html, когда значение равно true (флажок установлен)) и затем удаляю атрибут, когда значение равно false (не проверено).

Затем я читаю что-то, что .attr в jquery больше не поддерживается, и новый способ сделать это (по состоянию на jquery 3+)это использовать .prop ('флажок', true);

//background.js
var switchStatus;
chrome.storage.onChanged.addListener(function(changes, areaName){
    console.log('received');
    chrome.storage.local.get('sS', function(status){
        switchStatus = status.sS;
        console.log(switchStatus);

        if(switchStatus === true) {
            $('#togBtn').prop('checked', true);
            chrome.storage.local.set({'sS': true});            
            console.log('when checked ' + switchStatus);
        }
        if(switchStatus === false) {
            $('#togBtn').prop('checked', false);
            chrome.storage.local.set({'sS': false});
            console.log('unchecked ' + switchStatus);
         }
    });
});

//popup.js
$(function() { 
    var switchStatus;
    $("#togBtn").on('change', function() {
         chrome.storage.local.get('sS', function(status){
             switchStatus = status.sS;
         });
        if(($('#togBtn').is(':checked')) === true) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify

            chrome.storage.local.set({'sS': true}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }
        if(($('#togBtn').is(':checked')) === false) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify

            chrome.storage.local.set({'sS': false}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }   
    });
});

//popup.html
<label class="switch">
            <input type="checkbox" id="togBtn">
            <div class="slider round" id="thisthing">
                <span class="on">ON</span>
                <span class="off">OFF</span>
            </div>
        </label>

Опять же, я пытаюсь сохранить значение флажка после закрытия всплывающего окна.Поэтому, когда пользователь нажимает на флажок, и ползунок переключается на зеленый и «вкл.», Если пользователь должен был щелкнуть из всплывающего окна или перейти на новую вкладку, флажок все равно будет показывать зеленый и «вкл.»

Answer 1

Похоже, вы можете немного упростить свой код.

// background.js
chrome.storage.onChanged.addListener(function(changes, areaName){
    chrome.storage.local.get('sS', function(status){
        var switchStatus = status.sS;

        if(switchStatus) {
            $('#togBtn').prop('checked', true);
        } else {
            $('#togBtn').prop('checked', false);
        }
    });
});

и

// popup.js
$(function() {
    $("#togBtn").on('change', function(e) {
        if (e.target.checked){
            chrome.storage.local.set({'sS': true}, function(){
                alert('saved: True');
            });
        } else {
            chrome.storage.local.set({'sS': false}, function(){
                alert('saved: False');
            });
        }   
    });

    // I think that you may need to include this to initialize the checkbox.
    // I could be wrong though.
    chrome.storage.local.get('sS', function(status){
        var switchStatus = status.sS;

        if(switchStatus) {
            $('#togBtn').prop('checked', true);
        } else {
            $('#togBtn').prop('checked', false);
        }
    });
});