feature: useLocalStorage also update when the localStorage has been updated from other window

This commit is contained in:
Sebastian 2022-12-07 15:44:43 -03:00
parent d2554bedf3
commit 1c6369677a
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1

View File

@ -19,7 +19,7 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
import { StateUpdater, useState } from "preact/hooks";
import { StateUpdater, useEffect, useState } from "preact/hooks";
export function useLocalStorage(
key: string,
@ -33,6 +33,16 @@ export function useLocalStorage(
},
);
useEffect(() => {
const listener = buildListenerForKey(key, (newValue) => {
setStoredValue(newValue ?? initialValue)
})
window.addEventListener('storage', listener)
return () => {
window.removeEventListener('storage', listener)
}
}, [])
const setValue = (
value?: string | ((val?: string) => string | undefined),
): void => {
@ -52,6 +62,13 @@ export function useLocalStorage(
return [storedValue, setValue];
}
function buildListenerForKey(key: string, onUpdate: (newValue: string | undefined) => void): () => void {
return function listenKeyChange() {
const value = window.localStorage.getItem(key)
onUpdate(value ?? undefined)
}
}
//TODO: merge with the above function
export function useNotNullLocalStorage(
key: string,
@ -63,6 +80,17 @@ export function useNotNullLocalStorage(
: initialValue;
});
useEffect(() => {
const listener = buildListenerForKey(key, (newValue) => {
setStoredValue(newValue ?? initialValue)
})
window.localStorage.addEventListener('storage', listener)
return () => {
window.localStorage.removeEventListener('storage', listener)
}
})
const setValue = (value: string | ((val: string) => string)): void => {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);