Question

这是 Example ，其中图片和隐藏的输入会在点击时添加到div容器#area。我想使用localstorage来记住页面加载时的附加项目，但它不能使用此行

localStorage.setItem("imagecookie",$('#area').find('div:empty:first').append(img).append(input));

...
localStorage.getItem("imagecookie");

有人能告诉我如何让它发挥作用吗？

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 id="area"><div></div><div></div><div></div></div>

代码：

$('.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+'">';
        localStorage.setItem("imagecookie",$('#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(){
  $(this).empty();
  localStorage.clear();
});

localStorage.getItem("imagecookie");

Answer 1

Demo Fiddle ：存储内容;返回页面重新加载。

Demo ：只需存储内容 - 检查控制台以进行验证。

存储HTML内容将是更好的选择。

$('#area').find('div:empty:first').append(img).append(input)
localStorage.setItem("imagecookie",$('#area').html());

如何使用localstorage记住附加项目

1 个答案: