Question 226353 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cookie remembers that a checkbox has been ticked?

I’m looking to create a to-do list style webpage but I don’t want users to have to sign in to remember things they’ve ticked off. Very specific use case for this checklist which I won’t get into.

So, let’s say I have a check list like so:

To do:
[✔] Task 1
[ ] Task 2
[ ] Task 3

I’ve ticked Task 1 to say that it’s complete.

Is there a way I can set a cookie so when the user returns, Task 1 is still checked and Task 2 and 3 are still unchecked? This would need to update when Task 2 and Task 3 are inevitably checked or unchecked.

Tags:

2

Answers


  1. 0

    Yes, I managed to solve it with HTML & Javascript:

    <!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
</head>
<body>
  <h1>To do:</h1>
  <label><input type="checkbox" id="task1"> Task 1</label><br>
  <label><input type="checkbox" id="task2"> Task 2</label><br>
  <label><input type="checkbox" id="task3"> Task 3</label><br>
  <script src="script.js"></script>
</body>
</html>

    // Function to set a cookie
function setCookie(cname, cvalue) {
  var d = new Date();
  d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 days expiry
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

// Function to get a cookie by name
function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

// Function to update checkbox and cookie status
function updateStatus(taskId) {
  var taskElement = document.getElementById(taskId);
  var isChecked = taskElement.checked ? "true" : "false";
  setCookie(taskId, isChecked);
}

// Function to initialize the checkbox statuses from cookies
function initializeStatus() {
  for (var i = 1; i <= 3; i++) {
    var taskId = "task" + i;
    var cookieValue = getCookie(taskId);
    if (cookieValue === "true") {
      document.getElementById(taskId).checked = true;
    }
    document.getElementById(taskId).addEventListener("change", function() {
      updateStatus(this.id);
    });
  }
}

// Call the initialize function when the page loads
initializeStatus();

    What this does is to set and get cookies. When a checkbox is clicked, its status is stored in a cookie. When the page is reloaded, the checkboxes statuses are read from the cookies and restored accordingly

    Login or Signup to reply.
  2. 0

    If you only need the value in the browser it might be simpler to use localstorage, cookies are intended to be read also on server side.

    To set the value:

    localStorage.setItem("checkbox1", value)

    To read the value:

    const checkbox1Value = localStorage.getItem('checkbox1') ? Boolean(localStorage.getItem('checkbox1')) : false
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search