Keep class on refresh

Question

I am making a to-do list and when you click on a item it get the class "checked". How do i keep the state of the checked items? If I refresh the page now everything wil return to its normal state without the checked class.

I am looking for the right way to include LocalStorage in this. How can I store the checked class?

<ul id="myUL">
    <?php require_once "includes/todo-data.php";
    for($i = 0; $i < count($todo); $i++) { ?>
    <li>
        <?= $todo[$i]['bericht']; ?> <br> rollen: <?= $todo[$i]['rol']; ?>
        <a class="close" href="includes/delete.php?id=<?= $todo[$i]['id'] ?>">×</a>
    </li>
    <?php } ?>
</ul>

<script>
    // Add a "checked" symbol when clicking on a list item
    if (typeof(Storage) !== "undefined") {
        var list = document.querySelector('ul');
        list.addEventListener('click', function(ev) {
            if (ev.target.tagName === 'LI') {
                ev.target.classList.toggle('checked');

                // Store
                localStorage.setItem();
                // Retrieve
                document.getElementById("myUL").innerHTML = localStorage.getItem();
            }
        }, false);
    } else {
        document.getElementById("myUL").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
</script>

maybe store the selection into sessionStorage and retrieving it in window.onload() ? — Kunal Mukherjee, Jan 10 '19 at 14:30
You clearly are using PHP....So you need to do it with Ajax calls to PHP and store it on the server.... — epascarello, Jan 10 '19 at 14:30

score -2 · Answer 1 · answered Jan 10 '19 at 14:30

-2

Haven't yet worked with it on my own but you should use some kind of storage to save the checked items. You could have a look at localStorage or sessionStorage for example. Here is a link about implementing localStorage.

Hope that way it could solve your problem.

answered Jan 10 '19 at 14:30

Florian Schweighöfer

13
1
5

1

Although this isn't quite "link only"- it's more or less the same concept- wait until you can give precise 100% working answers to gain enough rep to comment suggestions :) – treyBake Jan 10 '19 at 14:34

Keep class on refresh

1 Answers1