Could you provide a "sharedSessionStorage" storage object?

[FezVrasta]

Could this library provide a "sharedSessionStorage" that would work just like "sessionStorage", but with synchronization between different tabs?

It could use BroadcastChannel to keep them in sync.

I think it should look like this:

const bc = new BroadcastChannel('sharedSessionStorage');
bc.onmessage = (evt) => {
  const { action, key, value } = JSON.parse(evt.data);
  switch (action) {
    case 'setItem':
      sessionStorage.setItem(key, value);
      break;
    case 'removeItem':
      sessionStorage.removeItem(key);
      break;
    default:
  }
};
export const sharedSessionStorage = {
  getItem: (key) => sessionStorage.getItem(key),
  setItem: (key, value) => {
    sessionStorage.setItem(key, value);
    bc.postMessage(JSON.stringify({ action: 'setItem', key, value }));
  },
  removeItem: (key) => {
    sessionStorage.removeItem(key);
  }
};

But it doesn't seem to notify the useStorageState hooks when a new value is set from a BroadcastChannel message.

[FezVrasta]

I just tried this package (https://www.npmjs.com/package/shared-session-storage) but I get the same issue, could it be a bug in this hook implementation?

(in the Chrome Dev Tools I see the correct values)

[soyguijarro]

Hi @FezVrasta! The library does synchronize data between tabs... Did you actually try it and didn't work? Then it'd be a bug. Please let me know. Thanks!

[FezVrasta]

Yes I tried but the components don’t seem to receive the updated values

[soyguijarro]

Yes I tried but the components don’t seem to receive the updated values

If you can provide a minimal reproducible example, I can try looking into it. Thanks again!

[FezVrasta]

You can try this one https://codesandbox.io/s/friendly-satoshi-dg2p2?file=/src/App.js

Open the app in two different tabs, click the "Random" button, observe the values are not in sync between the two tabs, but if you look into the Chrome Dev Tools, in the Session Storage you see the number key with the correct synced value.

Here's a gif:

[soyguijarro]

You can try this one https://codesandbox.io/s/friendly-satoshi-dg2p2?file=/src/App.js

Open the app in two different tabs, click the "Random" button, observe the values are not in sync between the two tabs, but if you look into the Chrome Dev Tools, in the Session Storage you see the number key with the correct synced value.

Here's a gif:

Okay, it does work if I change it to localStorage, so issue is with sessionStorage specifically. I'll try to look into it. Thanks again for reporting!

[pedro-lb]

According to MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

This is working as it should, only localStorage is shared between tabs.

[FezVrasta]

According to MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

This is working as it should, only localStorage is shared between tabs.

Of course, but the broadcast channel syncs it across tabs.

[pedro-lb]

According to MDN docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

• Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.

This is working as it should, only localStorage is shared between tabs.

Of course, but the broadcast channel syncs it across tabs.

This worries me since it seems (from this issue, couldn't find anything in repo) that we're sharing sessionStorage between tabs. This behavior goes against the idea of sessionStorage - based on this first comment from @soyguijarro:

Hi @FezVrasta! The library does synchronize data between tabs... Did you actually try it and didn't work? Then it'd be a bug. Please let me know. Thanks!

Does this lib do anything related to this?

I expect it to work just fine with localStorage, but sessionStorage should be isolated (except when using broadcast channels, of course).

[FezVrasta]

The point of my request is to have some shared state across tabs, that is not persisted after the tabs are closed.

Also, looking at my demo you can see everything in the synchronization logic works, it's just not reflected to React.

[minorgod]

If this lib is ever maintained again it would be a nice optional behavior, just don't make it the default behavior. Given all the unmerged PRs, my guess is this lib is abandoned. Bummer.