how to retain the div contents after page refresh

Question

I am creating a dynamic div using Jquery and I am trying to cache it so that, I will get it back after the page refresh, please help on how to achieve this,

pasting the code below

<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script src="jQuery.jCache.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $.jCache.maxSize = 20;
    function createDiv() {

        var divTemp = "<div><label>This is a Label</Label></div>";
        alert(divTemp);
        $(divTemp).appendTo("#divDisplay");
        $.jCache.setItem("myKey", divTemp);
    }

    $(document).ready(function() {


    if ($.jCache.hasItem("myKey")) {
        var cacheDiv = $.jCache.getItem("myKey");
            var cacheDiv = cacheDiv + "<a>anchor Tag</a>";
            $(cacheDiv).appendTo("#divDisplay");

        }
    }); 
</script>

I am trying to draw a div in the page using button click, after the click div is drawn in the page, when its refreshed using an F5 click, the div disappears, is there any way to retain the div contents using caching mechanisms?

this is been a showstopper for my whole functionality!

Thanks in advance, Shajo

Answer 1

try using a cookie http://plugins.jquery.com/project/cookie

Answer 2

You may be misunderstanding the way jCache works. The cache effectively gets wiped out whenever you (re)load the page, because the browser will spin up a new JavaScript execution environment. This browser behavior makes sense, because it prevents JS on different websites from being able to interact with one another, creating a big security vulnerability. If you play around with the jCache demo, you can test this behavior by populating the demo cache, reloading the page, and noticing that the cache is emtpy.

As for your particular application, you'll need to (re)design it such that a reload is not necessary. This is really the whole point of Ajax. I seriously doubt this is a show stopper for you. In the worst case, you should be able to regenerate the dynamic div when the user reloads the page. If you need to remember some state in order to regenerate the div, cookies may work for you.

Answer 3

The best bet would be to keep track of the div content server side. That way everytime the user updates the content of the div, an AJAX call can be made updating the server side representation of the div.

When the page loads for the first time your server can prepopulate the div. It then appears as if the page retains the content of the div after a reload.

This type of functionality is used in numerous sites now so I'm sure it can work for your scenario. Look at this site (SO). When you vote you are essentially changing something on the browser, the color of the voting arrow. If you refresh after the color does not revert, it somehow remembers that you voted. Thats because when you click the vote arrow an AJAX call is made and the fact that you voted is recorded on the server.