How to store persistent data client side

Question

I need to programmatically store data on the client side without having to transfer the data from the server on every page load. I considered generating a dynamic JavaScript file with the needed data for the current session of the user and make sure it is cached, but that seems really messy and there are a few drawbacks I can think of to such an approach.

How can I go about storing persistent data on the client side?

Answer 1

You may store data in window.name, which can hold up to 2MB of data (!).

/* on page 1 */
window.name = "Bla bla bla";

/* on page 2 */
alert(window.name); // alerts "Bla bla bla"

Edit: Also have a look at this Ajaxian article regarding this.

Note that other sites in the same tab/window does also have access to window.name, so you shouldn't store anything confidential here.

Answer 2

You can use the Web Storage API (Window.localStorage or Window.sessionStorage). Check out this article on html5doctor for a more in-depth explanation. The Web Storage API is supported by all modern browsers at this point.

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
^{https://developer.mozilla.org/en/docs/Web/API/Window/localStorage}

As highlighted above:

• To store the data indefinitely (until the cache is cleared), use Window.localStorage.
• To store the data until the window is closed, use Window.sessionStorage.

There are two methods of setting and getting properties via the Window.localStorage and Window.sessionStorage API's:

1. Access the properties directly:

   localStorage.name = 'ashes999';
   console.log(localStorage.name); // ashes999
   delete localStorage.name;
   console.log(localStorage.name); // undefined
   

   sessionStorage.name = 'ashes999';
   console.log(sessionStorage.name); // ashes999
   delete sessionStorage.name;
   console.log(sessionStorage.name); // undefined
   

2. Use the Storage.setItem, Storage.getItem, and Storage.removeItem API methods.

   localStorage.setItem('name', 'ashes999');
   console.log(localStorage.getItem('name')); // ashes999
   localStorage.removeItem('name');
   console.log(localStorage.getItem('name')); // undefined
   

   sessionStorage.setItem('name', 'ashes999');
   console.log(sessionStorage.getItem('name')); // ashes999
   sessionStorage.removeItem('name');
   console.log(sessionStorage.getItem('name')); // undefined
   

Caveats:

• Browsers may impose limitations on the storage capacity per origin of the Web Storage API, but you should be safe up to 5MB.
• The Web Storage API is limited by the same origin policy.
• Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies in Firefox

Answer 3

If you really need to do this (and I definitely have doubts that it's a good idea at all), your extra javascript file idea isn't as bad as you think. Just use JSON notation to keep the data and it's pretty easy to load and unload as needed. If you keep in some well-thought-out logical divisions you should be able to update just parts of it on demand, as well.

Answer 4

What about Google Gears. It is made for offline storage, but I think it might work. http://code.google.com/apis/gears/design.html

From the documentation:

Storing User's Data

Applications that are more than just static files have data that is typically stored on the server. For the application to be useful offline, this data must be accessible locally. The Database module provides a relational database for storing data. On the Architecture page you will find a discussion of strategies for designing the local storage that your application needs.

When an offline application reconnects, you will need to synchronize any changes made in the local database with the server. There are many different approaches to synchronizing data, and there is no single perfect approach. The Architecture page describes some strategies for synching.

An additional feature of the Gears database is Full-Text Search, providing a fast way to search text within a database file. Read the details here.