使用localstorage保持检查状态

Question

I have taken the following snippet from a previously asked question on how to store the checked/unchecked status of all checkboxes on a page in 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'));
    });

When I select one of the checkboxes and then refresh the page, once it reloads every single checkbox is checked.

How would I make this store each individual checked state?

Note I may have between 0 - 50 check boxes available depending on how many outstanding records there are in my gridview so I don't have fixed input id's to use only a record id associated to each row.

Answer 1

If you want to rely on a localStorage solution, you may do something like this:

$(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/

The first part is executed on page load and sets the checked state depending on the localStorage[name] value, where name is the input's name attribute.

The second part executes when any checkbox is being changed: it takes the input's name, as before, but instead of reading the value, it writes it.

Answer 2

IF the page would not load, it would be better to just store the values in JS object rather than using localStorage .

Just create a JS object and keep pushing values inside it and store

Client Side Solution if the page does not reload

    $(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;
              }
        });
   });

If Page reloads, then your best bet is to use server side concepts like Session . Send an AJAX request each time a particular checkbox is checked and store it in a session.

SERVER SIDE SOLUTION

      $(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
                          }
                        });
                  }

            });
      });

Check out the FIDDLE LINK

Answer 3

This is a solution for d3.js with a ternary operator use. It compares the id of this checkbox with the values stored under key=id in localStorage. If the value is "true" then 'this.checked' is set to 'true', else to 'null' ( null indicates: no 'checked' property)

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

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

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

});

Previously I have setItem in localStorage. The checkbox are created dynamically appended to rows in a table

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

which in turn is based on the data from a cvs. With the following ids for the checkboxes:

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

And the 'change' of the checkbox state:

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

    var id = this.id;

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

    else  {
    localStorage.removeItem(id);
    } 

  });

I have thousands of rows, each with a checkbox. I did not see a major issue on the timeline inspection. So I guess that this is a good solution. I am not a d3.js expert.