如何保持页面重新输入时输入框的状态

Question

How do I store a cookie for input checkbox current state? Every time when the page reloads, the state is restored to default (unchecked) and I've been buzzing my head with this. I even used a library without any success

https://github.com/js-cookie/js-cookie Cookie.set() and Cookie.get() but without success.

I've been also reading about localStorage JavaScript API but can't seem to getting working.

jQuery code:

$(function () {
    $('input[type="checkbox"]').click( () => {
        if ($(this).is(':checked')) {
            $('input[type="checkbox"]').prop('checked', true, localStorage.getItem('checked')).attr('checked', 'checked');
            localStorage.setItem('checked', 'checked');
            $('img').attr('src', '/full_logo_transparent.png');
            $('link#hueman-main-style-css').attr('href', '/darkstyle.min.css');
            console.log('Dark Mode enabled');
        } else {
            $('input[type="checkbox"]').prop('checked', false);
            $('link#hueman-main-style-css').attr('href', '/main.min.css');
        }
    })
});

This is suppose to remember the state of the input checkbox and save it upon page reload so that it doesn't have to be toggled every single time (It loads additional CSS file)

Am I missing something? Is the order correct?

The site is https://itmagazin.info and on the right you will find input:checkbox with the name "Noćni Režim" which activates the dark mode, but it doesn't stay that way after you click on any article.

Any help is appreciated.

Answer 1

This is much simpler than you are doing. Just get the last stored value upon page load and set it appropriately based on the state of the checkbox after being clicked.

The following code won't work in the Stack Overflow snippet environment, due to sandboxing, but you can test it here .

 $(function () { // Reset the checkbox to the last state on the last visit // The value in localStorage will be the strings "true", "false" or // it won't be there at all, in which case "" will be returned. // The opposite of "true" (or !"true") is the Boolean false and the // opposite of that (!!"true") is the Boolean true. The opposite of // "" (!"") is the Boolean true and the opposite of that (!!"") is the // Boolean false $('#check').prop("checked", !!localStorage.getItem("darkMode")); $('#check').on("click", function() { if ($(this).is(":checked")) { localStorage.setItem('darkMode', 'true'); $('img').attr('src', '/full_logo_transparent.png'); $('link#hueman-main-style-css').attr('href', '/darkstyle.min.css'); console.log('Dark Mode enabled'); } else { localStorage.setItem('darkMode', 'false'); $('link#hueman-main-style-css').attr('href', '/main.min.css'); console.log("No Dark Mode"); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="test" id="check"><label for="check">Item</label>