CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hammouda Houssam
Hammouda Houssam

Reputation: 13

How to Keep Button Toggled after Refresh the page using localStorage?

I have a simple Question How to keep the Sidebar Toggled when refresh the page please!! I know there is a simple trick called LocalStorage But i don't know How to apply it in my jQuery Code !!

HTML Code

<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 Code 

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

Upvotes: 1

Views: 656

Answers (1)

Skimrande
Skimrande

Reputation: 831

First you have to set the localStorage item (https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem).

window.localStorage.setItem(keyName, keyValue);

In your code, 

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

Upvotes: 1

Related Questions