当用户关闭弹出窗口时，保存位于弹出窗口中的复选框的值答案

【问题标题】：Save value of checkbox located in popup window when user closes out of the popup window当用户关闭弹出窗口时，保存位于弹出窗口中的复选框的值
【发布时间】：2019-05-28 21:22:28
【问题描述】：

我正在尝试创建一个 chrome 扩展，仅在选中复选框时记录用户数据（在视觉上，它是一个滑块，但仍然是一个复选框）。但是，在用户单击复选框后，我无法保存复选框的值。每当弹出窗口关闭时，复选框（或滑块）就会恢复为未选中状态。

我尝试在值为 true（选中）时将属性“选中”添加（从 background.js）到 popup.html 中的复选框，然后在值为 false（未选中）时删除该属性。

然后，我读到 jquery 中的 .attr 不再受支持，而新的方法（从 jquery 3+ 开始）是使用 .prop('checked', 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>

再次，我试图在弹出窗口关闭后保存复选框的值。因此，当用户单击复选框时，滑块切换到绿色和“开”时，如果用户要点击弹出窗口或转到新选项卡，复选框仍会显示绿色和“开”

【问题讨论】：

您的switchStatus 变量是否保存了正确的状态？看起来您有一个 console.log 来检查...是否保留复选框值？
是的，奇怪的是switchStatus 变量工作正常。问题，据我现在所知，即使复选框有时显示为“关闭”，switchStatus 的值也是true.. 我认为它只是没有保存在 popup.js 中
How do I return the response from an asynchronous call?的可能重复
Chrome API 回调不仅仅是为了展示，而是因为它们是异步调用的，这意味着您需要重新编写代码，如链接的 [duplicate] 主题中所示。

标签： javascript jquery html google-chrome-extension

【解决方案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);
        }
    });
});

【讨论】：

这解决了我的问题。非常感谢！！