How can I retain my checkbox status even if I refresh the page?

Question

I created a table with checkboxes. When I click on a checkbox, I can see the sign "✓". But when I refresh the page, the checkbox goes automatically to default version. If I click on a empty checkbox or clik on a already "checked" checkbox and refresh the page, I wanna see my changes as they are since I will need to take the value of the checkboxes int the feature.

<!-- Department's Table -->
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Surname</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Email</th>
                    <th scope="col">Authorisation</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>Test</td>
                    <td>Test</td>
                    <td>0555 555 55 55</td>
                    <td>test@test.com.tr</td>
                    <td><div style="text-align: center;">
                      <input type="checkbox"><div></div></input>
                      </div></td>
                  </tr>
                  </tr>                  
                </tbody>
              </table>
              <!-- End Authorisation For Departments Table Example -->

I tried to use Ajax but couldn't do anything. My aim is to create a table with questions and send the link of it to someone in order to give a score between 1-9. But everyone is giving a score to a different person for different question. Therefore there will be admin panel to give authorisation for both the questions and persons to someone who will rate. Therefore, I am trying to create another table called "Authorisation for departments". In this table ther will be checkboxes and with those checkboxes we will give permission to someone in order to rate someone. Of course, no one see who rate him/her. Therefore, I created a test table for permission but when I refresh the page, my checkbox goes to default status. If I checked a checkbox, I want it to stay like that when I refresh the page and when I unchecked it, again it should remain as it is when I refresh the page.

Answer 1

To make a checkbox remain checked even after refreshing the page, you need to save the state of the checkbox in some form of storage, such as local storage or cookies. Local storage is a convenient way to store small amounts of data in the user's browser. First give your checkbox an id. Then do the following in your Js file or script tag.
Try this if you have multiple inputs.

// Function to save checkbox states to Local Storage
function saveCheckboxStates() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach((checkbox) => {
    localStorage.setItem(checkbox.id, checkbox.checked);
  });
}

// Function to load checkbox states from Local Storage
function loadCheckboxStates() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach((checkbox) => {
    const savedState = localStorage.getItem(checkbox.id);
    if (savedState !== null) {
      checkbox.checked = savedState === 'true';
    }
  });
}

// Attach event listener to the checkboxes to save their states
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', saveCheckboxStates);
});

// Load checkbox states on page load
document.addEventListener('DOMContentLoaded', loadCheckboxStates);