Is it possible to have JavaScript (specifically, JavaScript variables and their content) survive full HTTP requests? I'd like to 'cache' / persist information client-side across page changes, without having to use hidden form fields or anything HTML related at all.

Is this possible?

Edit: Let me add a use case for what I mean.

1. Let's say I have a JavaScript array called arrayOfPersons which I loaded as part of page /HomePage, and now it contains 1,000 objects client-side.
2. Now the user switches the page and loads an entirely new page /MyAccount into the browser
3. My Goal: Still have the arrayOfPersons that I loaded on page /HomePage available after the user requested the entirely new page /MyAccount.

Hope that clarifies what I mean. Thank you!

Is it possible to have JavaScript (specifically, JavaScript variables and their content) survive full HTTP requests? I'd like to 'cache' / persist information client-side across page changes, without having to use hidden form fields or anything HTML related at all.

Is this possible?

Edit: Let me add a use case for what I mean.

1. Let's say I have a JavaScript array called arrayOfPersons which I loaded as part of page /HomePage, and now it contains 1,000 objects client-side.
2. Now the user switches the page and loads an entirely new page /MyAccount into the browser
3. My Goal: Still have the arrayOfPersons that I loaded on page /HomePage available after the user requested the entirely new page /MyAccount.

Hope that clarifies what I mean. Thank you!

• javascript
• clientside-caching

• @Fragsworth: Not sure why you would think of AJAX in this context. AJAX is used for asynchronous requests to the server. Not really related to caching information on the client. – Alex Commented Sep 24, 2009 at 9:05
• 4 Sure, but Ajax would be the standard way of approaching this kind of persistence problem – spender Commented Sep 24, 2009 at 9:07
• what about Gears & YUI Library: Storage Utility.. am not sure they whether they allow javascript objects to be stored.. i think YUI storage libray only supports simple string,int,bool datatypes as key value pairs.. – RameshVel Commented Sep 24, 2009 at 10:51
• What's wrong with setting a few cookies? – Duroth Commented Sep 24, 2009 at 12:51

7 Answers 7

Just to add to Nick's answer, different browsers support the idea of persistent storage in one form or another. There have been a bunch of efforts to normalize these for all browsers over the last year.

Here's one library that wraps around HTML 5's DOM Storage, Microsoft's UserData, Session Cookies and window.name (using JSON serialization as window.name can only store strings).

Here's another that focuses on window.name only (which actually works in Opera 9+, IE6+, Firefox 1.5+, Safari [3 I think).

Here's a jQuery plugin that uses a .swf (flash) file to offer the most cross-browser support (although it does support native solutions if you configure it to do so). I can't vouch for it but it should be mentioned for this jQuery-lovin' munity.

Yes it is possible. Its a bit of a hack i used to maintain the page state(in client side) throughout the entire session.

Have a base page (like master), that never refreshes through out the session and it only got the iframe within it. And all your application pages will be loaded in to that frame..

Store your state info into that master page as JS objects. And you can access the master page (parent) javacript objects from your child page in a iframe. And it ll be maintained through the session in client side.

This is the simplest way. And it works pretty neat.

Found a useful one

JSOC: JavaScript Object Cache

The JSOC framework is a a pluggable, extensible, open source client-side caching framework for JavaScript.

JSOC offers Web developers a straightforward way to perform mon caching techniques (add, replace, remove, flush, etc.) inside any JavaScript-enabled browser.

Since JSOC is a standalone JavaScript module, incorporating JSOC into a Web development project is a matter of including a script reference, and working with mon caching methods. Low-level methods are contained in the JSOC JavaScript module so that developers can focus on the Web development task at hand.

Newer browsers support DOM storage which let you store arbitrary data that can persist between pages. You can also use a hidden Flash app to remember things. There are libraries like Dojo Storage which handle the detection for you, so you just save your data and it will use whatever is available.

It won't automatically save all your Javascript variables for the next page - you'll need to add an onunload handler to store what you want when the user leaves the page.

A frameset would give you a place to persist your javascript, but full page load... I think not.

Cookies might also be useful for "persisting" data, but this isn't what you asked.

if i understand you correctly, all you need is to add your own caching functions into onSubmit of all forms and onClick of all links, smth like:

var cachedpages;
$("A").onclick(function(){
    url = $(this).attr('href'); // maybe hash?
    if (cachedpages[url]) {
         // replacing all html
    } else {
         $.get(url, function(data){
              cachedpages[url] = data;
              // replacing all html
         });
    }
    return false;
});

One possibility is to use a frameset and keep the objects there, another to serialize them and persist the data via either of

window.name
document.cookie
location.search

document.cookie is the canonical way to store data between invocations of pages in the same domain and provides mechanisms to control access and lifetime.

If you use window.name, the data persists over the lifetime of the browser instance.

Using window.location is more tricky and you have to explicitly modify the links to send along the data (which can be easily done using event delegation).