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

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)
});