useStorage Composable

import { ref, watch, type Ref } from 'vue';

type StorageType = 'localStorage' | 'sessionStorage';

export function useStorage<T>(
  key: string,
  initialValue: T,
  storageType: StorageType = 'localStorage'
): Ref<T> {
  // Get storage instance
  const storage = window[storageType];

  // Initialize with stored value or initial value
  const storedValue = storage.getItem(key);
  const value = ref<T>(
    storedValue ? JSON.parse(storedValue) : initialValue
  ) as Ref<T>;

  // Sync changes to storage
  watch(value, (newVal) => {
    __TOKEN_21__ (newVal === undefined) {
      storage.removeItem(key);
    } else {
      storage.setItem(key, JSON.stringify(newVal));
    }
  }, { deep: true });

  // Cleanup on unmount (optional)
  const remove = () => {
    storage.removeItem(key);
    value.value = initialValue;
  };

  // Expose remove method via object if needed, or just return ref
  return value;
}

// Usage example
// const userSettings = useStorage('user-settings', { theme: 'light', notifications: true });
// const sessionToken = useStorage('session-token', '', 'sessionStorage');