Share cookies or local storage data between cross domain ?

Share cookies or local storage data between cross domain ?


3 min read

Hello Devs,

Going to explain about how to share resources like cookies or local storage between subdomain and cross domain if domain owns by same owner or user.

But why cookies sharing required ?

Four years back i came across one problem while developing two website ( in WordPress) and in Angular) and requirement was both domain have to shared same login among them. Website should not ask customer to login again if he/she already login to one of domain.

What is problem ?

Now problem was there is as per www protocol cookies and session information is not directly available between subdomain and cross domain as per privacy of data. So, and even they belong to same domain they can't read each other cookie information or local storage.

Would like to know how to share data between subdomain or cross domains ? .

So, there is way to solve this issue. Have u heard about Publish-Subscribe Model ?

In short Publish-Subscribe Model is where is two endpoint can be act as publisher and listener(subscriber) and they will communicate to each other via medium. lets look at below image ๐Ÿ‘‡๐Ÿป where first image explain how two people communicate and second image express how two domain can communicate.


How we can develop this pattern using Javascript and HTML ? :

This code is in javascript and html so that can used in any javascript framework and html website. I have used this in combination of WordPress and Angular project.

Consider we have two domain and

  • Step1 : Add postCrossDomainMessage function in landing page like index.html

function postCrossDomainMessage(msg) {
  var win = document.getElementById('ifr').contentWindow;
  win.postMessage(msg, "");
var postMsg = {"login": "user"}; // this is just example
  • Step2: Add iframe tag in landing page where everywhere reflected. For Angular/React you can add it in index.html
<iframe style="display:none;" src="" id="ifr"></iframe>
  • Step3: On recipient domain create getlocalstorage.html file and put this code ๐Ÿ‘‡๐Ÿป in file getlocalstorage.html
 * Receiving message from other domain
window.addEventListener('message', function(event) {
    if (event.origin === PERMITTED_DOMAIN) {
        //var msg = JSON.parse(;
        // var msgKey = Object.keys(msg)[0];
        if ( {
        } else {


Note : If you want to use cookies then you can set using setCookies instead of localStoarge

We are done with one side communication.Now data can accessible using localStorage.getItem("localstorage"); at side. Same steps are applicable in reverse way from to

Now if customer or user login to one website then no need to login to another website which same products owns. This way login can share across two cross domain.

You can find detail code example at my GitHub Example . Click a star if you find this useful.

Thank you ๐Ÿ™๐Ÿป for reading article, You can connect with me at Twitter .

Share your valuable feedback and suggestions!

Did you find this article valuable?

Support Avinash Dalvi by becoming a sponsor. Any amount is appreciated!