Question

I have a page with a placeholder content block. Once the page is loaded I’m replacing the default block with some AJAX content, which is either loaded by default or by user interaction.

I’m replacing the loaded content like so:

// inside AJAX success handler
// data is JSON string sent via AJAX
// target is the element containing my default content

var makeUp = data;

target.addClass('fade out').html( makeUp ).trigger('create')
        .removeClass('fade out').addClass('fade in')

This works nicely and I can replace the content whenever the user does something on the page.

However if the user leaves the page and comes back when it’s still in the DOM, I want to show the default content. Right now, the last AJAX content is visible. So I’m looking at binding to page hide and restoring the default content from somewhere.

Question:
What’s the best way to store the default content on the page. It’s not much ( 1 controlgroup, 2 text blocks), but I’m reluctant to add this to the wrapper container as a data-default-string. There must be a better way.

Thanks!

Answer 1

According to this CanIUse page, you should be able to use HTML5’s web storage feature to store some values – I am looking specifically at a few mobile browsers that may be relevant to you.

The values could be a few keywords which will allow you to retrieve the textblocks and populate the placeholder, or if it’s small enough, you could store and retrieve the two textblocks themselves.