Question

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

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>

但是在页面刷新之后，这个更改将被遗漏。

Answer 1

您有两种方法可以让数据在页面加载中保持不变：

保存服务器端
保存客户端

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

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

Answer 2

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

使用cookie。有关示例，请参阅MDN page。
使用服务器端会话机制。细节取决于您使用的技术。
使用HTML5本地存储。有很多关于此的好文章，请参阅示例this one。

对于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);
  });
});

如果复选框状态已更改，是否可以永久保存在页面上？

2 个答案: