使用localStorage在整个站点上保留复选框的值

Question

例

该示例允许用户在Click上将图像附加到容器。 复选框按每页正常工作。 但是，当我在页面上选中一个复选框来存储图像，然后转到另一个页面并选中另一个复选框时，浏览器会将前一页中存储的值替换为当前页面的新值。 有没有办法在整个网站上保留所有选中的复选框的值？

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

本地存储只不过是一个数组（键值对）。

因此，当您在键“ saveddiv”的第一页上存储一个值并转到下一页，然后再次将其保存到savediv时，您将覆盖先前的值。

如果要将其添加到值中，则需要获取该项目并将字符串添加到检索到的值中。 然后将其保存到本地存储。