Merge pull request #8031 from marmelab/trello782-add-key-localstorage

[Fix] Add localStorage application key

Author: djhi

docs/Store.md

@@ -120,7 +120,7 @@ To create a Store with a different version number, call the `localStorageStore()
 ```jsx
 import { Admin, Resource, localStorageStore } from 'react-admin';
 
-const STORE_VERSION = 2
+const STORE_VERSION = 2;
 
 const App = () => (
     <Admin dataProvider={dataProvider} store={localStorageStore(STORE_VERSION)}>
@@ -131,6 +131,23 @@ const App = () => (
 
 Increase the version number each time you push code that isn't compatible with the stored values. 
 
+## Share/separate Store data between same domain instances
+
+If you are running multiple instances of react-admin on the same domain, you can distinguish their stored objects by defining different application keys. By default, the application key is empty to allow configuration sharing between instances.
+
+```jsx
+import { Admin, Resource, localStorageStore } from 'react-admin';
+
+const APP_KEY = 'blog';
+
+const App = () => (
+    <Admin dataProvider={dataProvider} store={localStorageStore(undefined, APP_KEY)}>
+        <Resource name="posts" />
+    </Admin>
+);
+```
+
+
 ## Transient Store
 
 If you don't want the store to be persisted between sessions, you can override the default `<Admin store>` component:

packages/ra-core/src/store/localStorageStore.spec.tsx

@@ -58,4 +58,15 @@ describe('localStorageStore', () => {
         fireEvent.click(screen.getByText('update'));
         screen.getByText('hello');
     });
+
+    it('should keep two version of the same key on two stores differing bey their appKey', () => {
+        const store1 = localStorageStore(undefined, 'app1');
+        const store2 = localStorageStore(undefined, 'app2');
+
+        store1.setItem('foo', 'app1');
+        store2.setItem('foo', 'app2');
+
+        expect(store1.getItem('foo')).toBe('app1');
+        expect(store2.getItem('foo')).toBe('app2');
+    });
 });

packages/ra-core/src/store/localStorageStore.ts

@@ -6,7 +6,6 @@ type Subscription = {
 };
 
 const RA_STORE = 'RaStore';
-const prefixLength = RA_STORE.length;
 
 // localStorage isn't available in incognito mode. We need to detect it
 const testLocalStorage = () => {
@@ -39,7 +38,12 @@ let localStorageAvailable = testLocalStorage();
  *   </Admin>
  * );
  */
-export const localStorageStore = (version: string = '1'): Store => {
+export const localStorageStore = (
+    version: string = '1',
+    appKey: string = ''
+): Store => {
+    const prefix = `${RA_STORE}${appKey}`;
+    const prefixLength = prefix.length;
     const subscriptions: { [key: string]: Subscription } = {};
     const publish = (key: string, value: any) => {
         Object.keys(subscriptions).forEach(id => {
@@ -53,7 +57,7 @@ export const localStorageStore = (version: string = '1'): Store => {
     // Whenever the local storage changes in another document, look for matching subscribers.
     // This allows to synchronize state across tabs
     const onLocalStorageChange = (event: StorageEvent): void => {
-        if (event.key?.substring(0, prefixLength) !== RA_STORE) {
+        if (event.key?.substring(0, prefixLength) !== prefix) {
             return;
         }
         const key = event.key.substring(prefixLength + 1);
@@ -77,13 +81,11 @@ export const localStorageStore = (version: string = '1'): Store => {
     return {
         setup: () => {
             if (localStorageAvailable) {
-                const storedVersion = getStorage().getItem(
-                    `${RA_STORE}.version`
-                );
+                const storedVersion = getStorage().getItem(`${prefix}.version`);
                 if (storedVersion && storedVersion !== version) {
                     getStorage().clear();
                 }
-                getStorage().setItem(`${RA_STORE}.version`, version);
+                getStorage().setItem(`${prefix}.version`, version);
                 window.addEventListener('storage', onLocalStorageChange);
             }
         },
@@ -93,7 +95,7 @@ export const localStorageStore = (version: string = '1'): Store => {
             }
         },
         getItem<T = any>(key: string, defaultValue?: T): T {
-            const valueFromStorage = getStorage().getItem(`${RA_STORE}.${key}`);
+            const valueFromStorage = getStorage().getItem(`${prefix}.${key}`);
 
             // eslint-disable-next-line eqeqeq
             return valueFromStorage == null
@@ -102,23 +104,20 @@ export const localStorageStore = (version: string = '1'): Store => {
         },
         setItem<T = any>(key: string, value: T): void {
             if (value === undefined) {
-                getStorage().removeItem(`${RA_STORE}.${key}`);
+                getStorage().removeItem(`${prefix}.${key}`);
             } else {
-                getStorage().setItem(
-                    `${RA_STORE}.${key}`,
-                    JSON.stringify(value)
-                );
+                getStorage().setItem(`${prefix}.${key}`, JSON.stringify(value));
             }
             publish(key, value);
         },
         removeItem(key: string): void {
-            getStorage().removeItem(`${RA_STORE}.${key}`);
+            getStorage().removeItem(`${prefix}.${key}`);
             publish(key, undefined);
         },
         reset(): void {
             const storage = getStorage();
             for (let i = 0; i < storage.length; i++) {
-                if (storage.key(i)?.substring(0, prefixLength) === RA_STORE) {
+                if (storage.key(i)?.substring(0, prefixLength) === prefix) {
                     const key = storage.key(i)?.substring(prefixLength + 1);
                     if (!key || !storage.key(i)) return;
                     // @ts-ignore