Javascript / HTML5 - 在localstorage

Question

我用javascript和html5创建了5个游戏，我正在使用声音。我有一个静音按钮，可以激活下面的功能。事情是，我想这样做，如果我按下静音按钮，我移动到另一个页面，它仍然会被静音，但我似乎无法弄清楚如何将它集成到这个功能。如果有人可以通过编辑代码来帮助我，我真的很赞赏它：D

function init(){
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;

    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);

function mute(){
    if (audio.muted){
        audio.muted = false;
        document.getElementById("mutebtn").src = "img/soundON.png";
    } else {
        audio.muted = true;
        document.getElementById("mutebtn").src = "img/soundOFF.png";


        }

    }
}

Answer 1

像这样修改你的功能

function init() {
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;
    var muteState = localStorage.getItem('muteState');
    if (!muteState || muteState !== 'true') {
        audio.muted = false;
        document.getElementById("mutebtn").src = "img/soundON.png";
    }
    else {
        audio.muted = true;
        document.getElementById("mutebtn").src = "img/soundOFF.png";
    }
    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);

    function mute() {
        if (audio.muted) {
            audio.muted = false;
            document.getElementById("mutebtn").src = "img/soundON.png";
        } else {
            audio.muted = true;
            document.getElementById("mutebtn").src = "img/soundOFF.png";
        }
        localStorage.setItem('muteState', String(audio.muted));
    }

}

Answer 2

使用“静音”方法将静音值添加到localStorage。

function mute(){
        ...
        audio.muted = false;
        localStorage.setItem('muted', 'false');
    } else {
        audio.muted = true;
        localStorage.setItem('muted', 'true');
    }
}

}

然后在init上检索localStorage值，如果之前未设置，则默认为false。

function init(){
    audio = new Audio();
    audio.src = "sound/paint_Music.mp3";
    audio.loop = true;
    audio.autoplay = true;
    var isMuted = (localStorage.getItem("muted") && localStorage.getItem("muted") == 'true') || false

    audio.muted = isMuted;
    mutebtn = document.getElementById("mutebtn");
    mutebtn.addEventListener("click", mute);
}