我有一长串跨不同页面的图像,用户可以单击图像自己的复选框,将戏剧性创建的图像存储在名为 #area
的 div 容器中。 ,它始终出现在网站顶部。
原始示例仅按页存储图像。当您翻阅其他页面时,容器将再次变空,除非您返回到结果列表中存储图像所在的页面。
我想知道是否可以存储 #area
的整个状态localStorage 中的容器,以便它始终记住站点上附加的图像。在第二个例子中,我检查Chrome控制台,发现它只能存储空的<div></div> <div></div> <div></div>
。但不是附加的图像。
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);
} else {
var term = $(this).data('term'),
findboximage = $('#area > div > img[data-term=' + term + ']')
findboximage.parent('div').empty();
}
});
$(document).on('click', '#area > div', function () {
var term = $(this).find('img').data('term');
$('input[data-term='+term+']').removeAttr('checked');
$(this).empty();
});
if (('localStorage' in window) && window['localStorage'] !== null) {
var divtosave = $("#area").html();
localStorage.setItem('saveddiv', divtosave);
}
if ('saveddiv' in localStorage) {
$(".bigbox").html(localStorage.getItem('saveddiv'));
}
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>
最佳答案
<强> Updated Demo
将最后一个条件更改为
if ('saveddiv' in localStorage) {
$("#area").html(localStorage.getItem('saveddiv'));
}
另外,
在函数中添加第一个 if 条件,并在追加后调用该函数。
function store() {
if (('localStorage' in window) && window['localStorage'] !== null) {
var divtosave = $("#area").html();
localStorage.setItem('saveddiv', divtosave);
}
}
关于javascript - localStorage 一切,包括在 jQuery 的 div 容器内动态创建的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24243214/