localStorage everything, including dynamically created images inside a div container in jQuery

Question

Original Example

My Example

I have a long list of images across different pages and users can click the images' own checkboxes to store the dramatically created images in a div container called #area , which is always present at the top of the site.
The original example only stores the images on a per-page basis. When you page through other pages, the container will become empty again unless you go back to the page where the stored images are in the list of results.

I want to know if it's possible to store the whole state of the #area container in localStorage so that it will always remember the appended images across the site. In the second example, I check the Chrome console and find that it can only store the empty <div></div> <div></div> <div></div> but not the appended images.

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

Updated Demo

Change the last condition to

if ('saveddiv' in localStorage) {
        $("#area").html(localStorage.getItem('saveddiv'));
}

Also,

add the first if condition in a function, and call this function after appending.

function store() {
    if (('localStorage' in window) && window['localStorage'] !== null) {
        var divtosave = $("#area").html();

        localStorage.setItem('saveddiv', divtosave);
    }
}