Cross-Domain LocalStorage

As you may know, LocalStorage is domain based. You can’t read or write from localstorage that’s on different domain, even if that’s subdomain. But there is iframe trick that you can use to store data from domain to it’s subdomain.

Besically you create an iframe that’s hosted on your subdomain that set document.domain to the parent domain. Then you send PostMessage to that iframe and inside iframe you set that value of localStorage.

Here is the code

iFrame


document.domain = "domain.com";
window.onmessage = function(e) {
  if (e.origin !== "http://domain.com") {
    return;
  }
  var payload = JSON.parse(e.data);
  localStorage.setItem(payload.key, JSON.stringify(payload.data));
};

main file


<script>
window.onload = function() {
    var win = document.getElementsByTagName('iframe')[0].contentWindow;
    var obj = {
       name: "Jack"
    };
    win.postMessage(JSON.stringify({key: 'storage', data: obj}), "*");
};
</script>
<iframe style="display:none" src="http://sub.domain.com/iframe.html"></iframe>

If you want to save and load value from LocalStorage, you can PostMessage with method key that will indicate what action it need to take. You can also send message back from iframe to it’s parent with data read from localStorage.

iframe


document.domain = "domain.com";
window.onmessage = function(e) {
    if (e.origin !== "http://domain.com") {
        return;
    }
    var payload = JSON.parse(e.data);
    switch(payload.method) {
        case 'set':
            localStorage.setItem(payload.key, JSON.stringify(payload.data));
            break;
        case 'get':
            var parent = window.parent;
            var data = localStorage.getItem(payload.key);
            parent.postMessage(data, "*");
            break;
        case 'remove':
            localStorage.removeItem(payload.key);
            break;
    }
};

Your main page on domain.com


window.onload = function() {
    var win = document.getElementsByTagName('iframe')[0].contentWindow;
    var obj = {
       name: "Jack"
    };
    // save obj in subdomain localStorage
    win.postMessage(JSON.stringify({key: 'storage', method: "set", data: obj}), "*");
    // load previously saved data
    win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
    window.onmessage = function(e) {
        if (e.origin != "http://sub.domain.com") {
            return;
        }
        // this will log "Jack"
        console.log(JSON.parse(e.data).name);
    };
};

,

  1. #1 by Mide Thesis on September 2, 2014 - 03:55

    Hi Jakub: thanks for the tutorial… it’s not very clear how the iframes should be set up. You have two code snippets labeled “iframe”. Are you using two iframes or just one?

    • #2 by jcubic on April 25, 2015 - 15:46

      Second iframe is extension of the first one to allow to set, get and remove data from localStorage.

  2. #3 by shaq1nj on October 16, 2014 - 22:25

    This is by far the best and most useful tutorial I’ve seen regarding HTML5 local storage usage. Thank you so much for sharing this knowledge with us!

  3. #4 by Eric on January 16, 2015 - 13:11

    meh

  4. #5 by fgsdjhfosdjfksdl on November 20, 2015 - 06:28

    This isn’t that clear to be honest. You need to identify which is you parent and which is your sub-domain

  5. #6 by Tushar on April 28, 2016 - 15:09

    I’m setting localstorage from a webpage, and then trying to access the same from an iframe but it shows me null. Iframe and parent window are not from the same domain. Is there any cross domain solution for this?

    • #7 by jcubic on June 29, 2016 - 14:21

      You need to save data to localStorage inside iframe that’s on sub domain. That’s the only way to have cross-domain localStorage, you simlpy send message to the iframe to save data.

  6. #8 by Devesh Jadon on July 21, 2016 - 08:19

    hey,
    this seems great but in this case sub domain url is limited to just one. What if i have dynamic sub domains. How can i set dynamic sub domain url inside main file’s iframe’s src.

  7. #9 by Konrad on November 24, 2016 - 14:31

    On note – meanwhile this is a smart trick to set the cross-domain local storage between domain-subdomain, keep in mind that due to the security policy on iOS devices the local storage will be associated to the compound of (host site, iframe site). It means that when you open on iOS the iframe content (domain.com), the local storage will be empty for it – but when you open it within an iframe like you set it, the local storage will be there.

  1. Cross-Domain LocalStorage | Web Apps with Coffe...
  2. Cookies, Third-Party Cookies, and Local/Session Storage – hscoelho

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: