@hsl-fi/shared-local-storage

Shared-local-storage

1. Listening: Mount SharedLocalStorageObserver in some file that will be mounted on every page

import SharedLocalStorageObserver from '@hsl-fi/shared-local-storage';

const keys = ['saved-searches', 'favouriteStore']; // LocalStorage-keys you want to observe
const url = "https://www.hsl.fi/local-storage-emitter"; // Url you want to receive the messages from

<SharedLocalStorageObserver
  keys={['saved-searches', 'favouriteStore']}
  url={url}
/>

2. Sending: Create local-storage-emitter-page with following component:

import {useSharedLocalStorageEmitter} from '@hsl-fi/shared-local-storage';

const keys = ['saved-searches', 'favouriteStore'];
const targetOrigin = 'https://www.hsl.fi';

const LocalStorageEmitter = () => {
  useSharedLocalStorageEmitter(keys, targetOrigin);
  return <div aria-hidden="true">LocalStorageEmitter</div>;
};

export default LocalStorageEmitter;

How it works

Example:

1. User selects a destination from autosuggest-list in HSL.fi

   • HSL.fi:
     • Selected destination is saved to localStorage using save-function from OldSearchesStore
     • saved-searches-updated-at-timestamp is updated
     • saved-searches-value is updated

2. User is redirected to Reittiopas

   • HSL.fi/local-storage-emitter (in iframe):
     • Sends a postMessage: current saved-searches in HSL.fi
   • Reittiopas:
     • Detects the postMessage using SharedLocalStorageObserver
       • saved-searches will be replaced with the one from the postMessage, since saved-searches-updated-at is greater than the current value

3. User selects a starting point or a destination in the autosuggest-list of the route search in Reittiopas

   • Reittiopas:
     • Selected destination is saved to localStorage using save-function from OldSearchesStore
     • saved-searches-updated-at-timestamp is updated
     • saved-searches-value is updated

4. User reloads the Reittiopas page

   • HSL.fi/local-storage-emitter (in iframe):
     • Sends a postMessage: current saved-searches in HSL.fi
   • Reittiopas:
     • Detects the postMessage using SharedLocalStorageObserver
       • saved-searches will NOT be replaced with the one from the postMessage, since saved-searches-updated-at is not greater than the current value