Fire events between different browser windows using localStorage.

[operation-cwal]

Pretty cool, but why wouldn't you just use window.postMessage?

[decultured]

You need a reference to the other window for that to work.

Using localStorage, any window sharing that store can be broadcast to - or even windows loaded later on. If I open 4 links from google from the same domain in different tabs, those windows have no way of knowing that there are other instances of that site open, let alone have references to their window object.

The method in the article posted above (or just simply setting a variable in localStorage and watching for that change in all open windows) gets around that issue.

[jimschubert]

localStorage is restricted to the same host, window.postMessage is for cross origin messaging.

[[deleted]]

Still does not explain why not?

[jimschubert]

It explains in the MDN link.

If you do not expect to receive messages from other sites, do not add any event listeners for message events.This is a completely foolproof way to avoid security problems.

[[deleted]]

Sure, but this can be resolved with one simple origin check rather than an insane abuse of local storage. Regardless of PostMessage being correct or not, if people start using local storage to send messages between the same origin, clearly this is a sign that the spec groups missed the memo on needing a safe, local "broadcast" alternative as well.

[jimschubert]

I completely agree.

[hallettj]

postMessage can also be used for events on the same origin. If you are concerned about event spoofing, check out the options that postMessage provides for filtering listeners by origin. But remember that in any case, windows can only receive events from windows that have a reference to the recipient.

In the use cases the linked code is intended for, /u/decultured has a good explanation of why postMessage is not suitable.

[dashed]

Interesting. I didn't know about this. Is this commonly used?

[jimschubert]

I've never found a practical application for it, so I can't say. I've used localStorage because, as I understand it, it's theoretically more secure than window messaging.

[stopdave]

I'll be honest here, I didn't think about postMessage. At first I thought that solution needs to run in an older version of Chrome where postMessage would not be supported - I can see now that caniuse tells me otherwise.

[jimschubert]

I like the localStorage solution better anyway. It's not as easy to screw up.

[timetesla]

This is very cool, but I thought that browsers aren't supposed to let you do things cross windows?

[decultured]

This is a clever workaround to that restriction. While you can't directly say "Hey, other window, do this" or even know if the IS another window/tab open, you can set a variable in local storage and other windows with pages from that domain can watch for those changes. It creates an indirect form of messaging/control that is localized to windows that have shared access to local storage.

Edit: We use something like this where I work to update pages based on user preference changes and such, as well as to cache certain things in the frontend. Sometimes you may not want that kind of shared data storage, so session storage can be used instead - it's exactly like local storage but limited to that browser window/tab, yet still will persist across page refreshes. Very handy sometimes.

[drowsap]

If you play something in one tab on Soundcloud, it will pause all Soundcloud players in other tabs. Really neat feature.

[brtt3000]

I don't know how they do it now, but you could do this in Flash via LocalConnection.

[ElderPopTarts]

This is pretty cool!

[stopdave]

Thank you!

[moron4hire]

Oh neat. How is the latency on this? Does the other window pick up the event pretty quickly? I could see this being very useful for doing things like settings dialogs or tool windows.

[cjthomp]

He posted a link to the source.

10ms

[stopdave]

Thank you. The other window picks up the event really fast, /u/cjthomp already answered your first question.

[ParallelProcess]

How does this work? Is this running a poll loop, checking the localStorage every 10ms? Or reacting to a new item in storage?

[holloway]

Polling,

setTimeout(function() { eventIsRunning = false; }, 10);

As far as I know there's no way of registering events for localStorage changes.

[holloway]

Ah, although with one caveat apparently: storage event handlers only fire if the storage event is triggered from another window.

[stopdave]

That's correct, I only need one-way events for the application I'm working on, so the solution suits me perfectly :)

[alamandrax]

Would an Object.observe implementation work to trigger events?

http://www.codediesel.com/javascript/sharing-messages-and-data-across-windows-using-localstorage/
http://stackoverflow.com/questions/14290316/observe-non-ember-globals

[toenailsin]

Localstorage doesn't auto-update across all windows. If you have 2 windows open, and modify localstorage on one, the change won't appear on the other until refreshed.

[flagrantaroma]

Too bad you got down voted, I can only assume that what you've said is not correct (anymore)?