Javascript 如何使用localstorage记住附加项

这里有一个，其中图像和隐藏的输入会被添加到div容器

#区域

。我想使用localstorage来记住页面加载时附加的项，但这一行不起作用

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

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

有人能告诉我怎么让它工作吗

HTML:

代码：

$（'.compare'）.change（函数（）{
如果（$（this）.is（':checked'））{
var img=$（''；
setItem（“imagecookie”，$（“#area”）.find（'div:empty:first'）.append（img）.append（input））；
}
否则{
var term=$（this）.data（'term'），
findboximage=$（“#区域>分区>img[数据项=”+项+”]）
findboximage.parent（'div'）.empty（）；
}
});
$（文档）。在（'click'，'#area>div'，函数（）上{
$（this.empty（）；
localStorage.clear（）；
});
getItem（“imagecookie”）；

：存储内容；在重新加载页面时检索

：只需存储内容-检查控制台即可验证

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

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

---

localstorage将数据存储为字符串…因此，当您将jQuery对象传递到本地存储时，它将存储为

[object object]

，您可以通过

$（'#area'）存储它。find（'div:empty:first'）。html（）

试试@Arun P Johny。非常感谢。本地存储可以跨页面工作吗？假设

#area

始终位于站点顶部，当我翻阅不同的页面时，#area还记得附加的项目吗？

$('.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");

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