// hooks/useStorage.ts
type StorageType = 'session' | 'local';
type UseStorageReturnValue = {
getItem: (key: string, type?: StorageType) => string;
setItem: (key: string, value: string, type?: StorageType) => boolean;
removeItem: (key: string, type?: StorageType) => void;
};
const useStorage = (): UseStorageReturnValue => {
const storageType = (type?: StorageType): 'localStorage' | 'sessionStorage' => `${type ?? 'session'}Storage`;
const isBrowser: boolean = ((): boolean => typeof window !== 'undefined')();
const getItem = (key: string, type?: StorageType): string => {
return isBrowser ? window[storageType(type)][key] : '';
};
const setItem = (key: string, value: string, type?: StorageType): boolean => {
if (isBrowser) {
window[storageType(type)].setItem(key, value);
return true;
}
return false;
};
const removeItem = (key: string, type?: StorageType): void => {
window[storageType(type)].removeItem(key);
};
return {
getItem,
setItem,
removeItem,
};
};
export default useStorage;
How to use
You can specify the storage type as well in setItem
and getItem
functions, if unspecified it will be session storage.
- For Session storage
'use client';
import useStorage from 'hooks/useStorage';
import useEffect from 'react';
...
...
const { getItem, setItem } = useStorage();
useEffect(() => {
setItem('sessionToken', 'value of token', "session")
// setItem('sessionToken', 'value of token')
// this will also work as default storage is session
} , [])
const token = getItem('sessionToken', "session") || ''
// const token = getItem('sessionToken') || ''
console.log(token)
- For Local storage
const { getItem, setItem } = useStorage();
setItem('token', 'value of token', "local")
getItem('token', 'value of token', "local")