Retain checkboxes' values across the site using localStorage

Question

Example

The example allows users to append images to a container on Click. The checkboxes work fine on a per-page basis. But when I check a checkbox on a page to store an image, then go to another page and check another checkbox, the browser will replace the stored values from the previous page with the new value of the current page. Is there a way to retain all the checked checkboxes' values across the site?

jQuery:

var $chks = $('.compare').change(function () {
    if ($(this).is(':checked')) {
        var img = $('<img>'),
            findimg = $(this).closest('.box').find('img'),
            data_term = findimg.data('term');
        img.attr('src', findimg.attr('src'));
        img.attr('data-term', data_term);
        var input = '<input type="hidden" name="imagecompare" value="' + data_term + '">';
        $('#area').find('div:empty:first').append(img).append(input);

        store();
    } else {
        var term = $(this).data('term'),
            findboximage = $('#area > div > img[data-term=' + term + ']')
            findboximage.parent('div').empty();
        store();
    }

});

$(document).on('click', '#area > div', function () {
      var term = $(this).find('img').data('term');
    $('input[data-term='+term+']').removeAttr('checked');  
    $(this).empty();
    store();

});

function store(){
if (('localStorage' in window) && window['localStorage'] !== null) {
        var divtosave = $("#area").html();
        localStorage.setItem('saveddiv', divtosave);
        var check = $('.compare').filter(':checked').map(function () {
         return $(this).data('term')
       }).get();        
        localStorage.setItem('check',check);
      }
     }



if ('saveddiv' in localStorage) {
        $("#area").html(localStorage.getItem('saveddiv'));
        var cookie = localStorage.getItem("check");
        var terms = cookie.split(',');
        if (terms.length) {
        $('.compare').filter($.map(terms, function (val) {
            return '[data-term="' + val + '"]'
        }).join()).prop('checked', true);
    }
}

HTML:

<div class="box">
    <img data-term="A" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_run.png/40px-Crystal_Clear_action_run.png" />
    <input data-term="A" class="compare" type="checkbox" />
</div>
<div class="box">
    <img data-term="B" src="http://upload.wikimedia.org/wikipedia/en/thumb/9/99/Question_book-new.svg/50px-Question_book-new.svg.png" />
    <input data-term="B" class="compare" type="checkbox" />
</div>
<div class="box">
    <img data-term="C" src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/30px-Commons-logo.svg.png" />
    <input data-term="C" class="compare" type="checkbox" />
</div>
<div class="bigbox">
<div id="area">
    <div></div>
    <div></div>
    <div></div>
</div>
</div>

Answer 1

The local storage is nothing more that an array (key-value pair).

So when you store a value on the first page in the key 'saveddiv' and you go to the next page and you save it again to the saveddiv you overwrite the previous value.

If you want to add it to the value you need to get the item and add the string to the retrieved value. And then save it to the local storage.