Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create localStorage for the same domain with www. at the same time or at the next visit?

Tags:

javascript

I have created a JS file that I place in some webpages other than mine. So mine is domain-1.com and I place this to domain-2.com and domain-3.com

This JS contains jsonp and I save some data from their pages to my database successfully. Also, I create some cookies and I save a value to the localstorage. the problem is that when a visitor goes to domain-2.com and tomorrow to www.domain-2.com they will have a different value because os the www.

I want this value to be the same across www. or not, maybe at the same time, I do not know an applicable idea. It is better for me to pass the value the same time for www. and without www.

How to do this? I only provide them with a JS external link. It is ok If I place an iframe also.

like image 638
EnexoOnoma Avatar asked Sep 01 '14 11:09

EnexoOnoma


1 Answers

The best solution would be to set a redirect to either of the domains so you can avoid this problem altogether.

The following code shows the concept of sending values to the non-www domain for storage only. If you need to read those values from the www domain too or want a library to do everything for you, you should use one of the libraries listed at the end. Those libraries use the same concept but will handle most things for you.


You can store the value on one domain only and use cross-origin communication to send the value if you are on the www domain. Create an iframe that loads a script of the non-www domain. In this script you save the value in the local storage of that domain.

Here is the content of the iframe with some minimal html5 markup, in this example saved as storage.html and served from example.com.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {

    if (!(event.origin == "http://example.com" || event.origin == "http://www.example.com")) {
        return;
    }

    localStorage.setItem(event.data.key, event.data.value);

}
</script>
</head></html>

When you want to store data use postMessage to communicate with the iframe. The iframe needs to be loaded before you can send messages.

<iframe id="storageScriptFrame"></iframe>

<script>

var target = "http://example.com";
var storageScriptFrame = document.getElementById("storageScriptFrame");
var storageScriptWindow = storageScriptFrame.contentWindow;


function storeItem(key, value) {
    var message = {key: key, value: value};
    storageScriptWindow.postMessage(message, target);
}


// you can store values after the iframe has loaded
storageScriptFrame.onload = function() {

    storeItem("foo", "bar"); 

};
// replace this with actual page
storageScriptFrame.src = 'http://example.com/storage.html'; 

</script>

Make sure to replace the example.com domain with the actual domain. Checking the origin domain is important so other sites can't send you messages.


At some point you will also want to read those stored values. Depending on what you do with the stored values, you have two options.

  • If you don't need to interact with the main window, you can move the script that reads values into the iframe.
  • If you do need to get the value on the main window, use postMessage again to send values back.

The second option can get complicated though, because postMessage is asynchronous and only works one way. I would recommend to use an existing library to do this (you don't need the code above then).

  • Cross Domain Local Storage looks good and easy to use
  • localStorage-tools is another library for this task

For example if you Cross Domain Local Storage you simply need to follow the setup instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and set items from the localstorage of example.com.

like image 197
kapex Avatar answered Oct 20 '22 00:10

kapex