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