Question

我正在做一个待办事项列表项目，如果用户重新加载页面或注销，则需要保存复选框状态。我找到了一种解决方案，该解决方案在重新加载后保持复选框状态为 localStorage 。

    $(function(){
    if (localStorage.input) {
        var checks = JSON.parse(localStorage.input);
        $("input[type='checkbox']").prop('checked', function(i) {
            return checks[i];
        });
    }
});

/* checkbox -- */
$(document).ready(function() {
   $("input[type='checkbox']").on('change', function() {
      var id = $(this).val();
      localStorage.input = JSON.stringify($("input[type='checkbox']").map(function() {
          return this.checked;
      }).get());
      if ($(this).is(':checked')) {
          //data
      } else {
        //error
      }
 });
});

但是这里有两个问题： 1-当用户注销时，即使数据库已更新，复选框也会丢失其状态。 2-当我单击一个复选框时，相同的状态转到另一个用户的任务，这意味着如果用户A选中了“已检查”的第一个任务，则用户B的第一个任务也处于“已检查”的状态！

对不起，如果我没有解释清楚！

Answer 1

使用sessionStorage代替localStorage，sessionStorage的用法如下

$(function() {
  if (sessionStorage.getItem('input')) {
      var checks = JSON.parse(sessionStorage.getItem('input'));
      $("input[type='checkbox']").prop('checked', function(i) {
          return checks[i];
      });
  }
});

/* checkbox -- */
$(document).ready(function() {
  $("input[type='checkbox']").on('change', function() {
      var id = $(this).val();
      sessionStorage.setItem('input', JSON.stringify($("input[type='checkbox']").map(function() {
          return this.checked;
      }).get()));
      sessionStorage.setItem('input',
      if ($(this).is(':checked')) {
          //data
      } else {
          //error
      })
  });
});

重新加载或注销后如何保持复选框状态？

1 个答案: