将复选框和音频状态保存到本地存储

Question

我正在尝试将复选框（选中/未选中）和音频（播放/暂停）的状态保存到本地存储。 复选框的默认状态被选中并且音频正在播放（循环），如下面的代码所示。

因此，如果选中该复选框，则音频正在播放，两者都应保存到本地存储（选中复选框并播放音频）。

否则，如果未选中该复选框，则音频将暂停，两者都应保存到本地存储（未选中复选框且音频已暂停）。

我遇到的问题是在再次检查复选框和音频后保存状态。

重现问题的步骤：1）取消选中复选框>音频停止>刷新浏览器>有效2）复选框>音频播放>刷新浏览器>不起作用，复选框未选中且音频未播放

这是javascript：

if (window.localStorage.getItem("musicState") != null) {
    var music = window.localStorage.getItem("musicState");
    if (music == "true") {
        status = 'pause';
        $("audio").trigger(status);
    }
    else {
        status = 'pause';
        $("audio").trigger(status);
        $("input:checkbox[name='music']").removeAttr("checked");
    }
}


$("input:checkbox[name='music']").click(function () {
    var visMusic = "play";
    if (status == 'pause') {
        status = 'play';

    } else {
        status = 'pause';
    }
    $("audio").trigger(status);

    window.localStorage.setItem("musicState", visMusic)

});

这是 HTML：

<audio autoplay loop>
    <source src="audio/music.mp3" type="audio/mpeg">
</audio>
<label><input type="checkbox" name="music" checked></label>

Answer 1

在复选框的单击回调中，您将visMusic设置为“播放”。 在将它作为“musicState”存储在 localStorage 之前，您永远不会更新它。 这意味着无论你做什么， "musicState" 总是等于 "play" 。

在顶部的 if 语句（从 localStorage 检索的位置）中，您正在测试您存储的内容是否为“真实”。 它不是，也永远不会是，因为它总是“玩” 。 您的代码总是转到您的else ，它会暂停音乐并取消选中该框。

这是一个应该可以工作的更新版本：

if (window.localStorage.getItem("musicState") != null) {
    var music = window.localStorage.getItem("musicState");
    if (music == "true") {
        status = 'play';
        $("audio").trigger(status);
    }
    else {
        status = 'pause';
        $("audio").trigger(status);
        $("input:checkbox[name='music']").removeAttr("checked");
    }
}

$("input:checkbox[name='music']").click(function () {
    var visMusic = "false";
    if (status == 'pause') {
        status = 'play';
        visMusic = "true";
    } else {
        status = 'pause';
    }
    $("audio").trigger(status);

    window.localStorage.setItem("musicState", visMusic)
});