18 - useLocalStorage

[cn-2k]

<script setup lang='ts'>

import { ref } from "vue"

function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue)

  localStorage.setItem(key, value.value)

  return value
}

const counter = useLocalStorage("counter", 10)

// 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>
</template>