Как отключить function Js localStorage

Question

Столкнулся с такой проблемой не могу отключить function по нажатию кнопки в function прописана система звука по нажатию. По умолчанию звук должен быть включен.

Значение False сохраняется в localStorage, что бы когда пользователь перезагрузит страницу у него сохранялись настройки.

Что мы имеем

let settings_sound = localStorage.getItem('settings_sound') || true;

Код звука при нажатии кнопки

function clicksound(){
    if (settings_sound = true) {
        var audio = document.createElement('audio');
        audio.src = 'sound/clickmenu.mp3'
        audio.autoplay = true;
        return true;
    }
}

Систему которая присваивает False чтобы отключить функцию

const clicksBTsoundOff = () => {
    if (settings_sound = true) {
        settings_sound = false
        updateStorageSetSound(settings_sound);
    }
}

function updateStorageSetSound(settings_sound) {
    localStorage.setItem('settings_sound', settings_sound);
}

document.getElementById('sound_off').addEventListener('click', clicksBTsoundOff)

Пробовал вывести за предел clicksBTsoundOff

updateStorageSetSound(settings_sound);

Что бы шла запись в localStorage, что значение settings_sound = True. Когда нажать на кнопку что бы отключить звук, значение в localStorage меняется на False. Но звук остается и даже если перезагрузить страницу значение все равно будет False и будет звук.

Answer 1

Ошибки у вас в сравнениях:

 if (settings_sound = true) { // = - оператор присваивания, а не сравнения

Должно быть:

 if (settings_sound === true) { // === - оператор сравнения

Вообще можно просто оставить так:

 if (settings_sound) {

Метод Storage.getItem() возвращает string или null, поэтому нужно привести результат к типу boolean

Вместо такого выражения:

let settings_sound = localStorage.getItem('settings_sound') || true;

Можно использовать что-то такое:

let settings_sound = (localStorage.getItem('settings_sound') || 'true') === 'true';

Зачем каждым кликом создавать новый элемент <audio> чтобы единоразово воспроизвести звук? У вас так DOM забьется мусором. Можно же один раз создать и уже сколько угодно раз воспроизводить звук с помощью этого элемента.

Сделайте лучше как-то так:

let settings_sound = (localStorage.getItem('settings_sound') || 'true') == 'true'; // всегда вернет boolean

const audio = new Audio('sound/clickmenu.mp3'); // создаем HTMLAudioElement
document.append(audio); // добавляем HTMLAudioElement в document

function clicksound () {
    if (!settings_sound) return; // если звук отключем, завершаем выполнение функции, возвращаем void 
    audio.play(); // иначе проигрываем аудио
}

function clicksBTsoundOff() {
    if (!settings_sound) return; // если settings_sound false, возвращаем void
    settings_sound = false;
    updateStorageSetSound(settings_sound);
}

function updateStorageSetSound(settings_sound) {
    localStorage.setItem('settings_sound', settings_sound); // boolean будет приведен к типу string
}

Ознакомьтесь дополнительно с материалом:

БЛОГ НА HUSL

Как отключить function Js localStorage

Ответы (1 шт):