Javascript Checkbox cookie

Question

On my php form with random number of checkboxes (depends on MySQL query results) i use pagination and checkbox_cookie.js script to remember checkboxes values from other subpages.

It works well if there is less then 200 checkboxes after that it's loosing memory of last checkbox changes e.g. i have 230 checkboxes spllited in 8 subpages it remember positions for those in 7 sub-pages but can't save states of checkboxes at page 8.

And now i'm seriously out of clue why is it happening.

Is it cookie size? JSON array limit? Something? Perhaps you will know where to look for an aswer.

Here's the checkbox_cookie code:

var aa_checkbox;  

function init_checkbox(){  
//setup blank cb cookie  
if(!Cookie.read('cb')){  
Cookie.write('cb', JSON.encode({}));  
}  

//setup "associative array" to match what is currently in the cookie  
aa_checkbox = JSON.decode(Cookie.read('cb'));  


//set up each checkbox with class="remember_cb"  
$$('input.remember_cb').each(function(el){  

//mark checked if it is in the cookie  
if(aa_checkbox[el.name]){  
  el.checked = 'checked'  
}  

//setup onclick event to put checkbox status in the   
el.addEvent('change', function(){  
  if(el.checked){  
    aa_checkbox[el.name] = 1;
  }else{  
    delete(aa_checkbox[el.name]);
  }     
})  
})  

//save aa_checkbox back into cookie upon leaving a page  
window.onbeforeunload = function(){Cookie.write('cb', JSON.encode(aa_checkbox));};  

setup_form();  

return true;  
 }  

function setup_form(){  
 //set up form so that it adds the inputs upon submit.  
$$('form.remember_cb_form').each(function(form){  
 form.addEvent('submit', function(ev){  
   //clean up previously inserted inputs  
   var aa_hidden_insert = $$('input.hidden_insert');  
    $each(aa_hidden_insert, function(el){   
     el.parentNode.removeChild(el);  
   })  

   var el_form = this;  

    //insert hidden elements representing the values stored in  aa_checkbox  
  $each(aa_checkbox, function(i_value, s_name){  
    if(i_value){   
      var el_input = document.createElement('input');  
      el_input.type = 'hidden';  
      el_input.value = i_value;  
      el_input.name = s_name;  
      el_input.setAttribute('class', 'hidden_insert');  
      el_form.appendChild(el_input);  
    }  
  });  
   });  
 });  
}  

window.addEvent('domready', init_checkbox);

charlietfl · Accepted Answer · 2015-07-16 14:37:09Z

1

Cookies have very small size limits since they get sent to server with each and every http request. You would be much better off using localStorage or sessionStorage API's. These store data within the browser itself

Although the localStorage API is fairly simple to use on it's own, there is a very handy little library wrapper you can use store.js which makes it even simpler

Reference : MDN STorage Docs

edited Jul 16, 2015 at 14:37

answered Jul 16, 2015 at 14:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

plomien Over a year ago

Yup, Thank you for this hint, ASAP i will redo the code and instead of using cookie checkbox memorizer i will use mentioned store.js library. Thanks.

Collectives™ on Stack Overflow

Javascript Checkbox cookie

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related