1

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

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>

但是在页面刷新后，这个更改就被错过了。

4

2 回答 2

3

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

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

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

localStorage.setItem("state", saveState()); // save
localStorage.getItem("state") // get
于 2013-08-26T14:00:20.193 回答
2

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

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

对于 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);
  });
});
于 2013-08-26T13:58:10.347 回答