how to store value permanently in javascript variable

Question

I want to make the application like below.

First there is a page with four radio buttons. The user clicks on any of the radio buttons but doesn't save and he goes to another page. Then if he comes back to same page with the radio buttons it shows the selected radio button before he goes to another page.

How can I do it by using jQuery, jsp, ajax and javascript ?

I can't use any session or coockies and database access. here I am redirecting the page by "location.href"

Please, give me the solution as soon as possible

Answer 1

Sounds like you want to store the value in a cookie.

EDIT: Here's a jQuery plugin for working with cookies: http://plugins.jquery.com/project/Cookie

Answer 2

Either append the selection to all links as a GET parameter (probably NOT the way to go but one way to let the client handle the state) or use cookies (preferably the jQuery cookie API which is a little easier than vanilla JavaScript cookie handling).

Answer 3

You can use YUI 2: Storage Utility:

The Storage Utility provides a mechanism for storing significant amounts of textual data, client-side, whether or not your browsers supports the proposed HTML 5 Storage specification.

Each instance of the Storage Utility leverages one of three storage engines in order to store data:

• HTML 5: If the client browser supports HTML 5, then this engine will wrap the browser's native storage capability (document.localStorage and document.sessionStorage).
• Google Gears: Google Gears is a browser extension that users can install on their machine. One of its features is a SQLite database; the Storage Utility uses this database for client-side storage when using the Gears engine.
• SWF: YUI provides a SWFStore Utility that normalizes access to the Flash Shared Object. This is the Storage Utility's fallback engine, which will work on most browsers due to the significant penetration of the Adobe Flash plugin.

---

General Usage Pattern

The following is the general code pattern used to fetch an engine, then write/read some data:

// this will fetch the first available engine
var storageEngine = YAHOO.util.StorageManager.get();

storageEngine.subscribe(storageEngine.CE_READY, function() {
    storageEngine.setItem('testText', 'this is a triumph');
    storageEngine.setItem('testNumber', 1234567890);
    storageEngine.setItem('testBoolean', true);
    alert(storageEngine.getItem('testText'));
});

Of course, the simplest and most low tech approach would be to use a cookie, for which there is a jQuery Plugin.

It's basic usage is like this:

<script src="../jquery-1.3.min.js" type="text/javascript"></script> 
<script src="jquery.cookie.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() {
        var COOKIE_NAME = 'test_cookie';
        var ADDITIONAL_COOKIE_NAME = 'additional';
        var options = { path: '/', expires: 10 };

        // set cookie by number of days
        $('a').eq(0).click(function() {
            $.cookie(COOKIE_NAME, 'test', options);
            return false;
        });

        // set cookie by date
        $('a').eq(1).click(function() {
            var date = new Date();
            date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
            $.cookie(COOKIE_NAME, 'test', { path: '/', expires: date });
            return false;
        });

        // get cookie
        $('a').eq(2).click(function() {
            alert($.cookie(COOKIE_NAME));
            return false;
        });

        // delete cookie
        $('a').eq(3).click(function() { 
            $.cookie(COOKIE_NAME, null, options);
            return false;
        });
</script>