Save checked box when checked and a box

Hello friends !

I need help please :slight_smile:

I made a kind of to-do list but based on a game. When you check the box, it “grays” the line. My problem is that when I refresh the page, it keeps the box checked with the API reference code, but on the other hand, the line is back to normal… I think it’s because my box is in “hidden” when loading the page. Is there a possibility to also keep the box “grayed out” when the box is checked on refresh?

Below is my site and code.

Thank you in advance for your help.

import {local} from 'wix-storage';
$w.onReady(function () {
    $w("#checkbox2").onChange((event) => {
        if ($w("#checkbox2").checked) {
            $w('#box2').show()
        } else {
            $w('#box2').hide()
        }

    })
    $w("#checkbox3").onChange((event) => {
        if ($w("#checkbox3").checked) {
            $w('#box5').show()
        } else {
            $w('#box5').hide()
        }

    })
    $w("#checkbox4").onChange((event) => {
        if ($w("#checkbox4").checked) {
            $w('#box7').show()
        } else {
            $w('#box7').hide()
        }

    })
    $w("#checkbox5").onChange((event) => {
        if ($w("#checkbox5").checked) {
            $w('#box8').show()
        } else {
            $w('#box8').hide()
        }

    })
    $w("#checkbox6").onChange((event) => {
        if ($w("#checkbox6").checked) {
            $w('#box10').show()
        } else {
            $w('#box10').hide()
        }

    })
    $w("#checkbox7").onChange((event) => {
        if ($w("#checkbox7").checked) {
            $w('#box12').show()
        } else {
            $w('#box12').hide()
        }

    })
    $w("#checkbox8").onChange((event) => {
        if ($w("#checkbox8").checked) {
            $w('#box15').show()
        } else {
            $w('#box15').hide()
        }

    })
    $w("#checkbox9").onChange((event) => {
        if ($w("#checkbox9").checked) {
            $w('#box17').show()
        } else {
            $w('#box17').hide()
        }

    })
    $w("#checkbox10").onChange((event) => {
        if ($w("#checkbox10").checked) {
            $w('#box19').show()
        } else {
            $w('#box19').hide()
        }

    })
    $w("#checkbox11").onChange((event) => {
        if ($w("#checkbox11").checked) {
            $w('#box20').show()
        } else {
            $w('#box20').hide()
        }

    })
    $w("#checkbox12").onChange((event) => {
        if ($w("#checkbox12").checked) {
            $w('#box22').show()
        } else {
            $w('#box22').hide()
        }

    })
    $w("#checkbox13").onChange((event) => {
        if ($w("#checkbox13").checked) {
            $w('#box24').show()
        } else {
            $w('#box24').hide()
        }

    })
});

local.setItem("checkbox", "checked");