How to keep a regular client part of the data

Question

I need to programmatically store data on the client side without the need to transfer data from the server every time the page loads. I decided to create a dynamic JavaScript file with the necessary data for the current user session and make sure that it is cached, but it seems really dirty, and there are several drawbacks that I can think of for this approach.

How can I store stored data on the client side?

Answer 1

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

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

Edit: Also see this Ajaxian article on this.

Please note that other sites in the same tab / window also have access to window.name , so you should not store anything confidential here.

Answer 2

You can use the web storage API ( Window.localStorage or Window.sessionStorage ). Check out this html5doctor article for a more detailed explanation. Web Storage API - currently supported by all modern browsers .

The read-only localStorage property allows you to access the Storage object to start the document; saved data is saved in browser sessions . localStorage is similar to sessionStorage, except that although the data stored in localStorage does not have an expiration date, the data stored in sessionStorage is cleared when the page session ends , that is, when the page closes.
^{https://developer.mozilla.org/en/docs/Web/API/Window/localStorage}

As mentioned above:

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

There are two methods for setting and retrieving properties using the Window.localStorage and Window.sessionStorage API:

• Access 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 

• 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 

Warning:

• Browsers may place limits on storage capacity at the start of the web storage API , but you should be safe up to 5 MB.
• The web storage API is limited to 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 probably have doubts that this is a good idea at all), your additional javascript file idea is not as bad as you think. Just use the JSON notation to store data, and it's pretty easy to load and unload as needed. If you keep in some well-designed logical units, you can also update them only on demand.

Answer 4

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

From the documentation:

Saving user data

Applications that are more than just static files have data that is usually stored on the server. For an application to be used offline, this data must be available locally. The database module provides a relational database for storing data. On the Architecture page, you will find a discussion of strategies for designing local storage that has applications.

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

An additional feature of the Gears database is full-text search, quick text search in the database file. Read the details here.