I have created a JS file that I place in some webpages other than mine. So mine is domain-1 and I place this to domain-2 and domain-3
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 and tomorrow to www.domain-2 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.
I have created a JS file that I place in some webpages other than mine. So mine is domain-1. and I place this to domain-2. and domain-3.
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. and tomorrow to www.domain-2. 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.
Share Improve this question edited Sep 6, 2014 at 18:17 EnexoOnoma asked Sep 1, 2014 at 11:23 EnexoOnomaEnexoOnoma 8,84420 gold badges98 silver badges186 bronze badges 3- 3 possible duplicate of use localStorage across subdomains – Andy Commented Sep 1, 2014 at 11:27
- Why don't you just want to create an iframe? :) – Mohammad Areeb Siddiqui Commented Sep 6, 2014 at 20:32
- This useful library helps me with the issue of creating cross site local storage data. github./zendesk/cross-storage – Boris Zagoruiko Commented Sep 9, 2014 at 9:16
1 Answer
Reset to default 7 +150The 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 munication 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..
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title> </title>
<script>
window.addEventListener("message", storeItem, false);
function storeItem(event) {
if (!(event.origin == "http://example." || event.origin == "http://www.example.")) {
return;
}
localStorage.setItem(event.data.key, event.data.value);
}
</script>
</head></html>
When you want to store data use postMessage to municate with the iframe. The iframe needs to be loaded before you can send messages.
<iframe id="storageScriptFrame"></iframe>
<script>
var target = "http://example.";
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./storage.html';
</script>
Make sure to replace the example. 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
postMessageagain to send values back.
The second option can get plicated though, because postMessage is asynchronous and only works one way. I would remend 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..