若复选框的状态被更改，它可以被永久保存在页面上

If state of checkbox was changed can it be permanently saved on page?

本文关键字：保存 存在 状态 复选框      更新时间：2023-09-26

如果复选框被选中/取消选中，我想将其状态永久保存在页面上。我试着这样smth：

function saveState() {
        document.getElementById($(this).parent().attr('id')).innerHTML = '<input type="checkbox" checked onclick="saveState.call(this)">'
    }

和

<td id="test"> <input type="checkbox" onclick="saveState.call(this)"> </td>

但在页面刷新后，会错过这些更改。

您有两个选项可以让数据在页面加载期间保持不变：

  1. 保存到服务器端
  2. 保存到客户端

使用本地存储是最快的客户端选项：

localStorage.setItem("state", saveState()); // save
localStorage.getItem("state") // get

要在页面重新加载后存储复选框的状态：

  1. 使用cookie。有关一些示例，请参阅MDN页面
  2. 使用服务器端会话机制。具体情况取决于您使用的技术
  3. 使用HTML5本地存储。有很多关于这方面的好文章，请看下面的例子

对于1和3，使用JS存储复选框的选中状态，然后在重新加载后读取该状态（分别从cookie或本地存储），并使用JS适当设置状态。

附带说明一下，请考虑使用"更改"事件而不是"单击"事件。

完整示例（假设您的输入具有id="i1"）：

$(document).ready(function () {
  $('#i1').prop('checked', 'true' === localStorage.getItem('checked'));
  $('#i1').change(function (ev) {
    console.log('save');
    localStorage.setItem('checked', ev.target.checked);
  });
});
相关文章：