All geek questions in one place

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

I created a JS file that I post on some web pages except mine. So my domain is domain.com and I put it in domain-2.com and domain-3.com

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

I want this value to be the same for www. or not, maybe at the same time, I don’t know the applicable idea. I better pass the value at the same time to www. and without www.

How to do it? I provide them with only JS external link. This is normal if I also posted an iframe.

+5
source share
1 answer

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

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

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

Here is the contents of an iframe with minimal html5 markup, in this example saved as storage.html and sent 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>

If you want to save the data, use postMessage to communicate with the iframe. Before sending messages, you need to load the iframe.

 <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>

Be sure to replace the example.com domain with the actual domain. It’s important to check the domain of origin so that other sites cannot send you messages.

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

  • If you do not need to interact with the main window, you can move the script, which reads the values ​​in the iframe.
  • If you need to get the value in the main window, use postMessage again to send the values ​​back.

The second option can get complicated because postMessage is asynchronous and works in only one way. I would recommend using an existing library for this (you don't need the code above).

For example, if you use cross-domain local storage, you just need to follow the installation instructions and in the initCallback function you can call xdLocalStorage.getItem and xdLocalStorage.setItem to get and install items from localstorage example.com .

+7
source

Source: https://habr.com/ru/post/1201560/

More articles:


All Articles