Published on

useSessionStorage Hook React

useSessionStorage Hook React

useSessionStorage Hook React

useSessionStorage Code and Usage

useSessionStorage is a hook to interact with the browsers session storage, similar to useLocalStorage.

import { useState } from "react";

const useSessionStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    const item = window.sessionStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setValue = (value) => {
    setStoredValue(value);
    window.sessionStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
};

// Usage
const SessionStorageExample = () => {
  const [count, setCount] = useSessionStorage("count", 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};