18 - useLocalStorage

[woojerry]

<script setup lang="ts">
import { ref, watchEffect } from "vue";

function useLocalStorage(key: string, initialValue: any) {
  const value = ref(localStorage.getItem(key) || initialValue);

  watchEffect(() => {
    localStorage.setItem(key, value.value);
  });

  return value;
}

const counter = useLocalStorage("counter", 0);

// We can get localStorage by triggering the getter:
console.log(counter.value);

// And we can also set localStorage by triggering the setter:

const update = () => counter.value++;
</script>

<template>
  <p>Counter: {{ counter }}</p>
  <button @click="update">Update</button>
</template>