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

export function useLocalStorage(key, initial) {
  const saved = localStorage.getItem(key);
  const value = ref(saved !== null ? JSON.parse(saved) : initial);

  watch(
    value,
    (newVal) => {
      localStorage.setItem(key, JSON.stringify(newVal));
    },
    { deep: true } // also fire on nested changes inside objects/arrays
  );

  return value;
}


<!-- src/PersistentCounter.vue -->
<script setup>
import { useLocalStorage } from '../composables/useLocalStorage';

const count = useLocalStorage('counter', 0);
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="count++">+1</button>
  <button @click="count = 0">Reset</button>
</template>

<!--
  Notes:
  - useLocalStorage returns a normal-looking ref whose initial value
    comes from localStorage (or `initial` if nothing's stored yet).
  - The watch re-saves to localStorage on every change, so the count
    survives a page refresh — the same useLocalStorage idea seen as a
    React custom hook and an Angular signal+effect, here as a composable.
  - saved !== null (not just `saved`) is used so a legitimately stored
    0 or "" isn't mistaken for "nothing saved".
-->