localStorage一切，包括在jQuery中的div容器內動態創建的圖像

Question

原始例子

我的例子

我在不同頁面上都有很長的圖像列表，用戶可以單擊圖像自己的復選框，以將創建效果顯着的圖像存儲在名為#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>

Answer 1

更新的演示

將最后一個條件更改為

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);
    }
}