How can I use LocalStorage with Vue 3 Composition API?

How can I use LocalStorage with Vue 3 Composition API?

You can use the ref and watch functions from the Composition API to manage LocalStorage. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import { ref, watch } from 'vue';

export default {
  setup() {
    const storedValue = ref(localStorage.getItem('myValue') || '');

    watch(storedValue, (newValue) => {
      localStorage.setItem('myValue', newValue);
    });

    return { storedValue };
  }
};

How do I retrieve the value from LocalStorage when the component mounts?

You can initialize your ref with the value from LocalStorage, as shown in the example. It retrieves the value when the component mounts.