LOCALSTORAGE and SESSIONSTORAGE with React hooks in TypeScript

To manage localStorage and sessionStorage with React hooks in TypeScript, you can create custom hooks that provide a simple API for adding, updating, and deleting items from storage. Below are examples of how you can implement these hooks.

useLocalStorage Hook

import { useState } from 'react';

// Hook for managing localStorage
function useLocalStorage<T>(key: string, initialValue: T) {
  // Retrieve value from localStorage
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  // Set value to localStorage
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  // Remove value from localStorage
  const removeItem = () => {
    try {
      setStoredValue(initialValue);
      window.localStorage.removeItem(key);
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue, removeItem] as [T, typeof setValue, typeof removeItem];
}

export default useLocalStorage;

useSessionStorage Hook

import { useState } from 'react';

// Hook for managing sessionStorage
function useSessionStorage<T>(key: string, initialValue: T) {
  // Retrieve value from sessionStorage
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.sessionStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  // Set value to sessionStorage
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  // Remove value from sessionStorage
  const removeItem = () => {
    try {
      setStoredValue(initialValue);
      window.sessionStorage.removeItem(key);
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue, removeItem] as [T, typeof setValue, typeof removeItem];
}

export default useSessionStorage;

How to Use These Hooks

You can use these hooks in your components like this:

import React from 'react';
import useLocalStorage from './hooks/useLocalStorage'; // Adjust the import path as needed
import useSessionStorage from './hooks/useSessionStorage'; // Adjust the import path as needed

const MyComponent: React.FC = () => {
  const [localStorageValue, setLocalStorageValue, removeLocalStorage] = useLocalStorage<string>('myKey', 'initialValue');
  const [sessionStorageValue, setSessionStorageValue, removeSessionStorage] = useSessionStorage<number>('myKey', 0);

  return (
    <div>
      <h1>Local Storage Value: {localStorageValue}</h1>
      <button onClick={() => setLocalStorageValue('newValue')}>Set Local Storage Value</button>
      <button onClick={removeLocalStorage}>Remove Local Storage</button>

      <h1>Session Storage Value: {sessionStorageValue}</h1>
      <button onClick={() => setSessionStorageValue((prev) => prev + 1)}>Increment Session Storage Value</button>
      <button onClick={removeSessionStorage}>Remove Session Storage</button>
    </div>
  );
};

export default MyComponent;

Explanation

• Initialization: The hooks initialize state from localStorage or sessionStorage or use the provided default value if nothing is found.
• Set Value: The setValue function updates both the state and storage. It handles both direct values and updater functions.
• Remove Item: The removeItem function removes the item from storage and resets the state to its initial value.

These hooks should cover the common use cases for managing data in localStorage and sessionStorage within a React application using TypeScript.