Javascript/HTML5-在本地存储上保存静音

我正在用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";


        }

    }
}

---

在“静音”方法中将静音值添加到

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

---

像这样修改你的函数

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

}

---

localStorage.getItem（“muted”）

=>

=“false”

=>

true

，它并不总是产生所需的结果。换句话说，非空字符串将隐式转换为

true

，而不管其内容如何。谢谢您的帮助。但是这样，当页面加载时，音频总是静音的：首先，谢谢你的帮助。这几乎是完美的我想要的。如果我按下静音按钮，声音会在下一页静音，但是，静音功能也会更改图像的来源，因此当声音静音时，它会显示一个图像（soundOFF），如果不是，它会显示另一个图像（soundON）。问题是，当我点击“静音”进入下一页时，声音是静音的，但它显示了错误的图像。你知道我怎样才能改变吗？哇，非常感谢！正是我想要的！祝您今天过得愉快！