[英]Retain checkboxes' values across the site using localStorage
該示例允許用戶在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>
本地存儲只不過是一個數組(鍵值對)。
因此,當您在鍵“ saveddiv”的第一頁上存儲一個值並轉到下一頁,然后再次將其保存到savediv時,您將覆蓋先前的值。
如果要將其添加到值中,則需要獲取該項目並將字符串添加到檢索到的值中。 然后將其保存到本地存儲。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.