触发事件后如何在本地存储中设置复选框状态

Question

我有一个默认选中的复选框输入，它可以切换页面上元素的可见性。我希望用户在刷新页面时保存选项。

var c = document.createElement('input')
c.setAttribute("type", "checkbox")
c.checked = true

c.onclick = function(){
    if(c.checked) element.style.display = 'block'
    if(c.checked == false) element.style.display = 'none'
}

/* This code below saves the state of the checkbox,
 but never fires the event or updates the element */

c.checked = (localStorage.getItem('cchecked')== 'true');
c.onchange = function(){
    localStorage.setItem('cchecked', c.checked)
}

Answer 1

好吧，一个更完整的例子可以工作..

<!DOCTYPE html>
<html>
    <body>
        <hr id="line" />

        <script>
        var element = document.getElementById('line')
        var c = document.createElement('input')
        c.setAttribute("type", "checkbox")
        c.checked = true

        c.onclick = function(){
            if(c.checked) element.style.display = 'block'
            if(c.checked == false) element.style.display = 'none'
        }

        /* This code below saves the state of the checkbox,
         but never fires the event or updates the element */

        // c.checked = (localStorage.getItem('cchecked')== 'true');
        if (localStorage.getItem('cchecked')== 'true') {
            c.checked = true;

        }
        else if (localStorage.getItem('cchecked')== 'false') {
            c.checked = false;

        }

        c.onchange = function(){
            localStorage.setItem('cchecked', ( c.checked ? 'true' : 'false'))
        }

        if ( !c.checked) element.style.display = 'none'

        document.body.appendChild(c);
        </script>

    </body>

</html>

触发事件后如何在本地存储中设置复选框状态

How to set the checkbox state in local-storage after an event is fired

javascript

game-development

local-storage