使用localStorage刷新頁面后如何保持按鈕切換？

Question

我有一個簡單的問題，請刷新頁面時如何保持側邊欄切換！！ 我知道有一個簡單的技巧叫做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();
    });
});