Question

我从先前提出的问题中获取了以下代码段，内容是如何在localstorage中的页面上存储所有复选框的选中/未选中状态：

     $(function(){
        var test = localStorage.input === 'true'? true: false;
        $('[type="checkbox"]').prop('checked', test || false);
    });

    $('[type="checkbox"]').on('change', function() {
        localStorage.input = $(this).is(':checked');
        console.log($(this).is(':checked'));
    });

当我选中其中一个复选框然后刷新页面时，一旦重新加载，每个复选框都会被选中。

我如何将每个单独的检查状态存储起来？

注意我可能有0到50个可用的复选框，具体取决于我的gridview中有多少未完成的记录，因此我没有固定的输入ID来仅使用与每个相关的记录ID行。

Answer 1

如果您想依赖localStorage解决方案，可以执行以下操作：

$(function(){
    $('[type="checkbox"]').each(function () {
        var $this = $(this),
            name = $this.attr('name');
        $this.prop('checked', localStorage[name] === 'true');
    });
});

$('[type="checkbox"]').on('change', function() {
    var $this = $(this),
        name = $this.attr('name');
    localStorage[name] = $this.is(':checked');
});

http://jsfiddle.net/mct7xgq2/

第一部分在页面加载时执行，并根据localStorage [name]值设置检查状态，其中name是输入的名称属性。

第二部分在任何复选框被更改时执行：它像以前一样获取输入的名称，但不是读取值，而是写入。

Answer 2

如果页面无法加载，最好只将值存储在JS对象中，而不是使用localStorage。

只需创建一个JS对象并继续在其中推送值并存储

如果页面未重新加载，则为客户端解决方案

    $(function(){
      var checkedItems ={};
        $('[type="checkbox"]').on('change', function() {
               //Store the ID value also in the localstorage
              if($(this).is(':checked')){
          var id = $(this).attr('id'); //Get the id if this is checked
           checkedItems['id_'+id] = id;
              }
        });
   });

如果页面重新加载，那么最好的办法是使用Session等服务器端概念。每次选中特定复选框时发送AJAX请求并将其存储在会话中。

服务器端解决方案

      $(function(){
            $('[type="checkbox"]').on('change', function() {
                   //Store the ID value also in the localstorage
                  if($(this).is(':checked')){
                    var id = $(this).attr('id'); //Get the id if this is checked
                    $.ajax({
                          type: 'POST',
                          url: your server side url path, //store it in a session
                          data: {'id':id},
                          dataType: 'html',
                          success: function(result){
                          //so some functionality
                          }
                        });
                  }

            });
      });

查看FIDDLE LINK

Answer 3

这是d3.js的解决方案，使用三元运算符。它将此复选框的id与localStorage中key = id下存储的值进行比较。如果值为“true”，则'this.checked'设置为'true'，否则设置为'null'（null表示：没有'checked'属性）

var box = d3.selectAll(".box").each(function(){

      var id = this.id;
      var storageValue = localStorage.getItem(id);

      this.checked = storageValue === "true" ? true : null;

});

以前我在localStorage中有setItem。该复选框是动态附加到表中的行

    rows.append('input')
        .attr('type','checkbox')

反过来又基于cvs的数据。使用以下复选框的ID：

.attr("id", function(d,i) { return 'box'+' '+i; })

复选框状态的“更改”：

d3.selectAll(".box").on("change", function() {

    var id = this.id;

    if ( this.checked ){
    localStorage.setItem(id, this.checked); 
    }

    else  {
    localStorage.removeItem(id);
    } 

  });

我有数千行，每行都有一个复选框。我没有看到时间轴检查的主要问题。所以我想这是一个很好的解决方案。我不是d3.js专家。

使用localstorage保持已检查状态

3 个答案: