Is it possible to use HTML5 local storage to share data between pages from different sites?

javascript html local-storage same-origin-policy
Jérôme Verstrynge picture Jérôme Verstrynge · Apr 22, 2013 · Viewed 13.2k times · Source

I would like to create data on the user side and let javascript from another URL access it too. I am aware of the same origin policy, but I was wondering whether it is possible to create some exceptions. Or, is there any trick/feature I could use?

Answer

chrmod picture chrmod · Apr 22, 2013

Best trick I know is to use iframes and postMessage API do get access to localStorage from external domain.

This technique is quite simple:

  • on you page you must create iframe to a domain from which you want to get data

  • your data domain need listen to message event:

    document.addEventListener ("message", handler, useCapture);

  • handler will be responsible for accessing localStorage and posting its content to source domain

  • your source domain may call handler function on data domain with postMessage API https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

For security of your data you can use HTTP header X-Frame-Options ALLOW-FROM uri https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options?redirectlocale=en-US&redirectslug=The_X-FRAME-OPTIONS_response_header

Hope it will help.

Related questions

Storing Objects in HTML5 localStorage

I'd like to store a JavaScript object in HTML5 localStorage, but my object is apparently being converted to a string. I can store and retrieve primitive JavaScript types and arrays using localStorage, but objects don't seem to work. Should they? …

Read More
How to delete a localStorage item when the browser window/tab is closed?

My Case: localStorage with key + value that should be deleted when browser is closed and not single tab. Please see my code if its proper and what can be improved: //create localStorage key + value if not exist if(localStorage){ localStorage.…

Read More
How do I store an array in localStorage?

If I didn't need localStorage, my code would look like this: var names=new Array(); names[0]=prompt("New member name?"); This works. However, I need to store this variable in localStorage and it's proving quite stubborn. I've tried: var localStorage[…

Read More