custom react hook for calculating local storage size in kb.

useLocalStorageSize.js

import { useState, useEffect } from "react";

export function useLocalStorageSize() {
  const [localStorageSize, setLocalStorageSize] = useState(0);

  useEffect(() => {
    const calculateLocalStorageSize = () => {
      let totalSize = 0;
      for (let key in localStorage) {
        if (Object.prototype.hasOwnProperty.call(localStorage, key)) {
          const size = (localStorage[key].length + key.length) * 2;
          totalSize += size;
        }
      }
      return totalSize / 1024; // Convert to kb
    };

    const updateLocalStorageSize = () => {
      const size = calculateLocalStorageSize();
      setLocalStorageSize(size);
    };

    // Listen for changes to storage event
    window.addEventListener("storage", updateLocalStorageSize);

    // Calculate initial size
    updateLocalStorageSize();

    // Cleanup
    return () => {
      window.removeEventListener("storage", updateLocalStorageSize);
    };
  }, []);

  return `${localStorageSize} kb`;
}