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

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 检索的位置)中，您正在测试存储的内容是否为“true”。 现在不是，也永远不会是，因为它始终是“玩”。 您的代码始终会转到您的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)
});