Tag: postMessage

In this article, we are going to teach you, how you can share local storage between websites using Javascript. Local storage is not accessible even within subdomains. So if I set the value in one subdomain, it will not be accessible in another subdomain.

Video tutorial:

To share the local storage value between websites, first, we need to create an iframe tag in the source website.

<iframe src="http://destination-website.com/saveLocalStorage.php" style="display: none;"></iframe>

The value of src attribute will be the path of the destination website. And we will hide the iframe using the CSS property display: none; so it will not be visible on the source website.

Then we will create a script tag and call a function that will be called when the page is loaded. You can also call it on any function you want, for example, when the user is logged in, you want to share the user’s authentication token to another website. In that case, you can write the below code inside your login function, but for the sake of simplicity, we are calling it inside the page load function.

<script>
    window.addEventListener("load", function () {
        // [code goes here]
    })
</script>

The following code will go inside the section. First, we will get the iframe DOM object.

const iframe = document.querySelector("iframe")

Then we will get the iframe content window.

const wind = iframe.contentWindow

Then we will set the data that needs to be sent.

const data = {
    name: "adnan-tech.com"
}

After that, we will call the postMessage function from the iframe content window object i.e. wind. The second parameter of the postMessage will be * in double quotes which means there is no preference for target origin.

wind.postMessage(JSON.stringify(data), "*")

You can learn more about it here.

Now we will come to the destination website, the file name will be saveLocalStorage.php. Create a script tag and attach a listener that will be called when the message is received. The second parameter will be a function and it will have an argument event (e).

<script>
    window.addEventListener("message", function (e) {
        // [destination code goes here]
    })
</script>

The following code goes in the [destination code goes here] section. First, we will check if the origin of the message is our source website because otherwise, any other website can also send post messages as well. If the origin of the message is not from our source website, then we will do nothing and stop the function.

if (e.origin !== "http://source-website.com") {
    return
}

// [parse data object]

If the message is from our source website, then we will first parse the data from a JSON string to a javascript object. Write the code in the [parse data object] section.

const data = JSON.parse(e.data)

Then we will check if the message has a name field.

if (typeof data.name !== "undefined") {
    // [save in local storage]
}

If it has, then we will set it in the destination website's local storage. Also, we will log the message that will be displayed in the source website's console tab. The following code goes in the [save in local storage] section:

localStorage.setItem("name", data.name)
console.log("Name is set: " + data.name)

Save the destination website file and refresh the source website. The name will be set, and you will see that message in your source's browser console. If you open your destination website's browser console and type localStorage.getItem("name"), you will see the name that you can send from the source website. Then you can use that value in the destination website in any way you like.

Complete code: Share local storage between websites in Javascript

<!-- source.php -->

<iframe src="http://destination-website.com/saveLocalStorage.php" style="display: none;"></iframe>

<script>
    window.addEventListener("load", function () {
        const iframe = document.querySelector("iframe")
        const wind = iframe.contentWindow
        
        const data = {
            name: "adnan-tech.com"
        }
        
        wind.postMessage(JSON.stringify(data), "*")
    })
</script>

<!-- http://destination-website.com/saveLocalStorage.php -->

<script>
    window.addEventListener("message", function (e) {
        if (e.origin !== "http://source-website.com") {
            return
        }
        
        const data = JSON.parse(e.data)
        
        if (typeof data.name !== "undefined") {
            localStorage.setItem("name", data.name)
            console.log("Name is set: " + data.name)
        }
    })
</script>

So that's how you can share local storage value from one website to another using Javascript. If you face any problems in following this, kindly do let me know. Check out our more tutorials on Javascript.

[wpdm_package id='1801']