Abstraction of the local storage using Vue3's composition API

AppWithLocalStorage.vue

<script setup>
import useLocalStorage from './useLocalStorage'
const publicKey = useLocalStorage('solana-wallet-public-key')
</script>

<template>
    <div>
        <input type="text" v-model="publicKey">
        <div v-text="publicKey"></div>
    </div>
</template>

useLocalStorage.js

import { customRef } from 'vue'

export default function (key, defaultValue) {
    return customRef((track, trigger) => ({
        get: () => {
            track()
            const value = localStorage.getItem(key)
            return value ? JSON.parse(value) : defaultValue
        },
        set: value => {
            if (value === null) {
                localStorage.removeItem(key)
            } else {
                localStorage.setItem(key, JSON.stringify(value))
            }
            trigger()
        },
    }))
}