no - 18 - useLocalStorage

[ricardoHer]

// your answers

<script setup lang='ts'>

import { ref, watch } from "vue"


/**
 * Implement the composable function
 * Make sure the function works correctly
*/

const setLocalStorage = (key: string, value: string) => localStorage.setItem(key, value);

function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue)
  watch(value, () => setLocalStorage(key, value.value), { immediate: true });  
  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>