Skrypt 14: Zapamiętywanie zaznaczenia checkboxa (localStorage)

Teoria

Zapamiętuje stan checkboxa (np. "Zapamiętaj mnie" przy logowaniu, "Ukryj ten komunikat na stałe") tak, żeby przetrwał zamknięcie i ponowne otwarcie strony — ten sam mechanizm localStorage co w Skrypcie 5.

Kod (JavaScript)

<label>
    <input type="checkbox" id="zapamietajMnie">
    Zapamiętaj mnie
</label>

<script>
    const checkbox = document.getElementById("zapamietajMnie");

    // wczytaj wcześniej zapisany stan od razu po wczytaniu strony
    checkbox.checked = localStorage.getItem("zapamietajMnie") === "tak";

    checkbox.addEventListener("change", function () {
        localStorage.setItem("zapamietajMnie", checkbox.checked ? "tak" : "nie");
    });
</script>

Komentarz i wyjaśnienie kodu

Właściwość checkbox.checked to wartość logiczna (true/false) mówiąca, czy pole jest zaznaczone. Ponieważ localStorage przechowuje TYLKO tekst, zapisujemy "tak"/"nie" zamiast bezpośrednio wartości logicznej, a przy odczycie porównujemy ją z === "tak", żeby z powrotem otrzymać true/false.

Typowe błędy

Częsty błąd to próba zapisania wartości logicznej wprost do localStorage (localStorage.setItem("x", true)) — zostanie ona i tak zamieniona na tekst "true", co bywa mylące przy dalszym porównywaniu.