时间戳

首页 > 解决方案 > 将复选框和音频状态保存到本地存储

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

问题描述

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

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

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

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

重现问题的步骤：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>

标签： javascripthtml

解决方案

在您的复选框的点击回调中，您设置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)
});

推荐阅读