Как удерживать кнопку включенной после Refre sh на странице, используя localStorage?

Question

У меня есть простой вопрос Как сохранить боковую панель переключенной при обновлении sh страницу, пожалуйста! Я знаю, что есть простой трюк под названием LocalStorage Но я не знаю, как применить его в моем jQuery коде !!

HTML коде

<button type="button" id="ToggleButton" class="btn btn-primary">
<span class="mr-1 icon_toggler"><i class="ion ion-md-radio-button-off"></i></span> Click here
</button>

<div id="wrapper" class="vh-100">
  <h1>Hello World</h1>
  <p>Hello , Hello</p>
</div>

<style>
#wrapper {
    background: blue;
    color: dark;
}
#wrapper .is_toggled {
    background: red;
    color: white;
}
</style>

JS Код

$(document).ready(function() {
    function ToggleHandle() {
        $('#wrapper').toggleClass('is_toggled');
    }
    if (window.localStorage.getItem('toggle-switch-state') && window.localStorage.getItem('toggle-switch-state') === "true") {
        ToggleHandle();
    }
    $(document).on("click", "#ToggleButton", function (toggle_x) {
        toggle_x.preventDefault();
        $('.icon_toggler').find('.ion').toggleClass('ion-md-radio-button-off ion-md-radio-button-on');
        if ($('.icon_toggler').find('.ion').hasClass('ion-md-radio-button-on')) {
            $($(this)).css("color", "var(--primary)");
        } else if ($('.icon_toggler').find('.ion').hasClass('ion-md-radio-button-off')) {
            $($(this)).css("color", "var(--dark)");
        }
        ToggleHandle();
    });
});

Answer 1

Сначала необходимо установить элемент localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem).

window.localStorage.setItem(keyName, keyValue);

В вашем коде

$(document).ready(function() {
    function ToggleHandle() {
        $('#wrapper').toggleClass('is_toggled');
    }

    // Has it been stored?
    if (window.localStorage.getItem('toggle-switch-state') === 'true') {
        ToggleHandle();
    }
    $(document).on('click', '#ToggleButton', function (toggle_x) {
        toggle_x.preventDefault();

        // If not stored before then store it.
        if (!window.localStorage.getItem('toggle-switch-state'))
        {
           window.localStorage.setItem('toggle-switch-state', 'true')
        }

        $('.icon_toggler').find('.ion').toggleClass('ion-md-radio-button-off ion-md-radio-button-on');
        if ($('.icon_toggler').find('.ion').hasClass('ion-md-radio-button-on')) {
            $($(this)).css('color', 'var(--primary)');
        } else if ($('.icon_toggler').find('.ion').hasClass('ion-md-radio-button-off')) {
            $($(this)).css('color', 'var(--dark)');
        }
        ToggleHandle();
    });
});