Did you know that you can use localstorage as an event bus between same-origin tabs?

Yep! Local storage is shared across same-origin domains. Which means you can share information between tabs on the same domain. Other cool thing is that the storage event that is fired on the window when localstorage changes, it only fired on non-focused tabs. This means you can write an event bus to sync the tabs you don’t have focused with the one you do! Neat.

When browsing around GitHub, like I do, I found this project called storeon. It is a framework agnostic state manager. It’s aim is to be small and flexible and provide additional functionality through plugins. One such plugin is called crosstab.

I am a Vue.js user who likes VueX. So I wanted to recreate this plugin in VueX. VueX also provides a plugin API so you can write plugins as well. So I wrote the plugin for VueX, published it to npm, and posted the source on GitHub.

Here is the demo of the plugin working:

laravel multi-lingual site demo

You can use the plugin like so:

// es6
// import CrossTab from 'vuex-crosstab';
// commonjs
const CrossTab = require('vuex-crosstab');

export default new Vuex.Store({
  // ...
  plugins: [
    // your other plugins...
    CrossTab({ recover: true })
  ],
  // ...
});

There is a simple config object you can pass to control some things like the “recovery” which will check the localstorage to see if there was state already in there. You can read more on the Github page.