Checkbox stay checked during flip or reload website

Hi everyone, I’m new guy in here, I’m learning about JavaScript, it’s not easy. I 'm trying to make checkbox stay checked after reload or flip other site in iframe in html. LocalStorage is not really work very well, it response is work, but it didn’t save all checked in all checkbox, then come back to load it back to all checkbox. Can you help? here my code.

Thanks,
Gary

<script>
    function onClickBox() {
        let checked = $("#box").is(":checked");
        localStorage.setItem("checked", checked);

        $("#msg").text("Checkbox is checked: " + $("#box").is(":checked"));
    }

    function onReady() {
        $("#msg").text("Loaded.");

        let checked = "true" === localStorage.getItem("checked");
        $("msg").prop('checked', checked);

        $("#box").click(onClickBox);
    }
    $(document).ready(onReady);
</script>
<form>
    <div id="msg"></div>
<table>
    <tr><th colspan="3">Spatial Verbs</th></tr>
    <tr><td>Go/Walk-To/From</td>
        <td><input class="single-count" type="checkbox" id="box" name="chkboxGrp0[]" value="1"></td>
        <td class="vert-middle">0</td></tr>

When debugging it helps to console.log any values to drill down where your error may be. For instance if you add

console.log(checked);

after

 let checked = "true" === localStorage.getItem("checked");

Inside you onReady() you will find that your localstorage is working as intended. Which means your issue is somewhere else.

Hint: You want to examine this line of code.
 $("msg").prop('checked', checked);

console show false in “checked”, does it mean empty in checkbox?

It means that the checkbox should be empty based on what you are trying to do. However if you were to click the box and reload the page your checked will be true however your input will not be checked. So the issue lies in how you are setting your DOM element to be in a checked state.

can you help me with those code? Maybe you can see something that I can’t see. Can you fix those code?
Thanks.

As already asked: what is wrong with this line of code $("msg").prop('checked', checked)

I checked with those, I don’t see anything change, even i don’t see all checkbox back to their place after flip or reload website

Does that mean you have fixed that line of code or does it mean you haven’t fixed that line of code?