即使刷新页面，如何保留复选框状态？

Question

我创建了一个带有复选框的表格。当我单击复选框时，我可以看到符号“✓”。但是当我刷新页面时，该复选框会自动变为默认版本。 如果我单击空复选框或单击已“选中”的复选框并刷新页面，我想按原样查看我的更改，因为我需要在功能中获取复选框的值。

<!-- 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>[email protected]</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 -->

我尝试使用 Ajax 但无济于事。我的目标是创建一个包含问题的表格，并将其链接发送给某人，以便给出 1-9 之间的分数。但每个人都会针对不同的问题给不同的人打分。因此，将有一个管理面板来向评分者授予对问题和人员的授权。因此，我试图创建另一个名为“部门授权”的表。在此表中将有复选框，通过这些复选框，我们将授予某人权限以便对某人进行评分。当然，没有人看到谁评价他/她。 因此，我创建了一个权限测试表，但是当我刷新页面时，我的复选框将变为默认状态。如果我选中了一个复选框，我希望它在刷新页面时保持原样，而当我取消选中它时，它应该在刷新页面时保持原样。

Answer 1

尝试使用浏览器存储（本地存储或cookie）。因此，下次渲染页面时，检查状态是否存在，并检查已检查的状态，如果状态不存在，则意味着用户之前不存在，因此渲染默认页面。

Answer 2

要使复选框在刷新页面后仍保持选中状态，您需要将复选框的状态保存在某种形式的存储中，例如本地存储或cookie。本地存储是在用户浏览器中存储少量数据的便捷方法。 首先给你的复选框一个 id。然后在 Js 文件或脚本标签中执行以下操作。

// Get the checkbox element
const checkbox = document.getElementById('myCheckbox');

// Check local storage for a previously stored value
const storedValue = localStorage.getItem('myCheckboxState');

// If there's a stored value, update the checkbox state accordingly
if (storedValue !== null) {
  checkbox.checked = JSON.parse(storedValue);
}

// Add an event listener to the checkbox to save its state in local storage
checkbox.addEventListener('change', function () {
  localStorage.setItem('myCheckboxState', JSON.stringify(checkbox.checked));
});