101 lines
2.4 KiB
JavaScript
101 lines
2.4 KiB
JavaScript
import { useMemo, useState, useEffect, useCallback } from 'react';
|
|
|
|
import { isEqual } from 'src/utils/helper';
|
|
import { localStorageGetItem } from 'src/utils/storage-available';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function useLocalStorage(key, initialState) {
|
|
const multiValue = initialState && typeof initialState === 'object';
|
|
|
|
// Read localStorage synchronously on first render — no useEffect, no flash
|
|
const [state, set] = useState(() => {
|
|
const stored = getStorage(key);
|
|
if (!stored) return initialState;
|
|
return multiValue ? { ...initialState, ...stored } : stored;
|
|
});
|
|
|
|
const canReset = !isEqual(state, initialState);
|
|
|
|
const setState = useCallback(
|
|
(updateState) => {
|
|
if (multiValue) {
|
|
set((prevValue) => {
|
|
setStorage(key, { ...prevValue, ...updateState });
|
|
return { ...prevValue, ...updateState };
|
|
});
|
|
} else {
|
|
setStorage(key, updateState);
|
|
set(updateState);
|
|
}
|
|
},
|
|
[key, multiValue]
|
|
);
|
|
|
|
const setField = useCallback(
|
|
(name, updateValue) => {
|
|
if (multiValue) {
|
|
setState({
|
|
[name]: updateValue,
|
|
});
|
|
}
|
|
},
|
|
[multiValue, setState]
|
|
);
|
|
|
|
const resetState = useCallback(() => {
|
|
set(initialState);
|
|
removeStorage(key);
|
|
}, [initialState, key]);
|
|
|
|
const memoizedValue = useMemo(
|
|
() => ({
|
|
state,
|
|
setState,
|
|
setField,
|
|
resetState,
|
|
canReset,
|
|
}),
|
|
[canReset, resetState, setField, setState, state]
|
|
);
|
|
|
|
return memoizedValue;
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function getStorage(key) {
|
|
try {
|
|
const result = localStorageGetItem(key);
|
|
|
|
if (result) {
|
|
return JSON.parse(result);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error while getting from storage:', error);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function setStorage(key, value) {
|
|
try {
|
|
const serializedValue = JSON.stringify(value);
|
|
window.localStorage.setItem(key, serializedValue);
|
|
} catch (error) {
|
|
console.error('Error while setting storage:', error);
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function removeStorage(key) {
|
|
try {
|
|
window.localStorage.removeItem(key);
|
|
} catch (error) {
|
|
console.error('Error while removing from storage:', error);
|
|
}
|
|
}
|