CODEWITHSUNDEEP
javascriptpersistencestorageclient-side
Itay Moav -Malimovka
Itay Moav -Malimovka

Reputation: 53603

How to store persistent data client side

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?

Upvotes: 19

Views: 27512

Answers (5)

Anderson Green
Anderson Green

Reputation: 31810

The Web Storage API has a limit of 5MB for local storage, but it's possible to store greater amounts of data on the client-side using IndexedDB. In some newer browsers, it is also possible to cache data for offline use using Service Workers.

URL fragments can also store client-side data, though they can store only a few thousand characters in most browsers.

Client-side storage is usually limited to just one origin, though it is possible to share it between origins using postMessage().

Upvotes: 0

ashes999
ashes999

Reputation: 10163

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:

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

Upvotes: 25

moff
moff

Reputation: 6503

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.

Upvotes: 11

Martin
Martin

Reputation: 6032

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.

Upvotes: 2

Joel Coehoorn
Joel Coehoorn

Reputation: 415880

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.

Upvotes: 3

Related Questions