Building a Reusable Composable for Local Storage Management

// useLocalStorage.js
import { ref, watchEffect } from 'vue';

export function useLocalStorage(key, defaultValue) {
  const value = ref(defaultValue);

  // Check if localStorage is available (for SSR compatibility)
  const isBrowser = typeof window !== 'undefined' && window.localStorage;

  if (isBrowser) {
    // Load initial value from localStorage if available
    const storedValue = localStorage.getItem(key);
    if (storedValue !== null) {
      try {
        value.value = JSON.parse(storedValue);
      } catch (e) {
        console.error(`Error parsing localStorage key "${key}":`, e);
        value.value = defaultValue;
      }
    } else if (defaultValue !== undefined) {
      // If no stored value but a default is provided, store the default initially
      localStorage.setItem(key, JSON.stringify(defaultValue));
    }
  }

  // Watch for changes to 'value' ref and update localStorage
  watchEffect(() => {
    if (isBrowser && value.value !== undefined) {
      try {
        localStorage.setItem(key, JSON.stringify(value.value));
      } catch (e) {
        console.error(`Error saving to localStorage key "${key}":`, e);
      }
    }
  });

  return value;
}

// App.vue (Usage Example)
<template>
  <div>
    <h1>Local Storage Composable</h1>
    <p>Saved Message: {{ message }}</p>
    <input v-model="message" placeholder="Type a message to save" />

    <p>Counter: {{ counter }}</p>
    <button @click="counter++">Increment</button>
  </div>
</template>

<script setup>
import { useLocalStorage } from './useLocalStorage';

const message = useLocalStorage('my-app-message', 'Hello Vue!');
const counter = useLocalStorage('my-app-counter', 0);
</script>