Javascript tools for localStorage and cross-domain localStorage

Share the same localStorage unit between different domains (or subdomains).

If you have a few webs, or a few access ways to a web, like www.myweb.com, myweb.com, wiki.myweb.com, etc…, and you use the localStorage javaScript utility, the stored information by one of them won’t be accesible from the other ones. Nonetheless, there is a way to do it by using a hidden iframe and the window.postMessage function which is supported by the most of the browsers.

Note: To see the stored values, with Chrome you can go to “Right click->Inspect element->Application” and unfold the Local Storage tree.

The trick consists on loading an iframe with the URL you want to store the information with, and pass the “setItem” or “getItem” requests to that iframe with window.postMessage. The main difference is that the cross-domain storage is asyncronous, unlike the localStorage, so you’ll need to adapt the behaviour to that.

First we need to put the iframe html file in the server, and adding your domains to the whitelist in it:

Now we can already use this function (crossDomainStorage) to store and share data between domains.
Usage example:

 

Or using promises:

 

Another thing to consider is that unlike the cookies, localStorage hasn’t an expiration time, and in some cases the data could grow until the browser storage limit. To avoid this I’ve implemented a couple of classes which make use of a list with a given maximun number of elements, one of them uses the localStorage directly, and the other one uses the previous function “cross_domain_storage” to do it asyncronously with the iframe.

You have the full code in GitHub.

Stores a given maximun number of elements in localStorage (limitedStorage.js)

 

It’s a queue: if the limit is reached, then first-in -> first-out
If a previously present item is added (with set(key, item) method), it will be put last in the queue again.

You have to indicate in the constructor the maximun number of elements to store, the storage space as string (localStorage or sessionStorage), and a prefix for the vars names in the selected storage space:

It can be used the same way the native storage space:
Functions:

  • setItem(key, value) ‘value’ must be serializable by JSON.stringify method.
  • getItem(key) If ‘key’ does not exists, returns null
  • removeItem(key) Remove the item associated to the ‘key’

Usage example:

 

 
Tagged , , . Bookmark the permalink.

5 Responses to Javascript tools for localStorage and cross-domain localStorage

  1. Amit Sharma says:

    Hello there,

    Just to inform you : the method which you have provided to retrieve data from LocalStorage is not working as expected.
    Its not waiting for the value for Key1 key. So till the time we don’t have value for Key1, callback function should not be called.

    I think minor code modifications are required like using promises so that key1’s value must be retrieved before calling callback method.

    By the way, Nice plugin thanks.

    • JuanRa says:

      Hi Amit,

      First of all, thanks for the report.

      I’ve been doing some testing and I cannot find the issue you mentioned. The ‘getItem’ method uses already promises, if it’s supported, or simply a callback function that is called when the message arrives from the iframe via ‘postMessage’ method.

      Taking into account that the ‘postMessage’ method is an asynchronous call, maybe the problem is that in your case the iframe attends the getItem method before than setItem, just because they are one next to the other in the code example (what is very unlikely in real applications). This is the only explanation I can imagine for the moment.

      Nevertheless, if you have any improvement for the code, I’d be glad to accept contributions in the github repo 🙂

      Thanks.

  2. Vinicius says:

    Hello!

    I am having some trouble understanding how to retrieve the data from the Storage function. Could you share some light on it?

    • JuanRa says:

      Hi!

      About the simple cross-domain storage, this is an extract from one of the examples abobe:

      I think this is the clearest example. The main thing is the “callback_funtion”, wich is called once the data has been received from the iframe. This function receives the key and its value stored before.

      Also you need the crossd_iframe.html file in your server, with your domain in the witelist. Take a look at this file in GitHub, recently the code was updated to allow regular expressions in the witelist:

      https://github.com/juanrmn/localStorage-tools/blob/master/crossd_iframe.html

      If this not helps, just post here your exact issue.

  3. Dheivendiran says:

    Hi  JuanRa

    I am doing offline browsing( ex: site’s blogs list). When a user is online (accessing site using URL) I save the blogs data in browser’s local storage. If a user is not online he must be able to view blogs by using only single blogs.html file which is downloaded from site while the user was online.

    The issue is I am not able to read the local storage data from blogs.html file the data stored while the user was online. Please let me your script can solve this issue? or is there any way to do it?

     

Leave a Reply

Your email address will not be published. Required fields are marked *