cross domain localstorage with javascript

Question

We have a javascript api.js which is hosted on domain api.abc.com. It manages the local storage.

We included this javascript in our websites at abc.com and login.abc.com as a cross domain js like

<script src="http://api.abc.com/api.js"> 

I understand that localstoarge is per domain basis. However since api.js is loaded from api.abc.com, I expected that it will have access to local storage of api.abc.com from both the domains. Unfortunately, it doesn't seem to be the case. When api.js stores a value in localstoarge from one domain, it's not accessible to it when loaded from other domain.

Any idea?

Answer 1

How about using cross domain postmessage and iframes?

So on your wrong-domain-page you include an iframe that posts messages with the cookie data back.

Here is a solid example of cross domain postmessages: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

live example: http://codepen.io/anon/pen/EVBGyz //forked sender code with a tiiiiiny change :) :

window.onload = function() {     // Get the window displayed in the iframe.     var receiver = document.getElementById('receiver').contentWindow;      // Get a reference to the 'Send Message' button.     var btn = document.getElementById('send');      // A function to handle sending messages.     function sendMessage(e) {         // Prevent any default browser behaviour.         e.preventDefault();          // Send a message with the text 'Hello Treehouse!' to the new window.         receiver.postMessage('cookie data!', 'http://wrong-domain.com');     }      // Add an event listener that will execute the sendMessage() function     // when the send button is clicked.     btn.addEventListener('click', sendMessage); } 

Receiver code:

window.onload=function(){     var messageEle=document.getElementById('message');     function receiveMessage(e){         if(e.origin!=="http://correct-domain.com")         return;         messageEle.innerHTML="Message Received: "+e.data;     }     window.addEventListener('message',receiveMessage); } 

Answer 2

As noticed in your post the localStorage (sessionStorage too) won't be stored on the storage related to the domain api.abc.com. If this was the case, by using CDN version of a library using localStorage you would have to share storage with all the other websites using this library.

One good solution could be to use an iframe with postMessage as explained in the following stack overflow: use localStorage across subdomains