Vue@3 useLocalStorage composable

useLocalStorage.ts

import { onMounted, onUnmounted, ref, watch } from 'vue';

export function useLocalStorage(key: string, defaultValue: any = null, deep = false) {

    let initialValue;

    try {
        initialValue = JSON.parse(localStorage.getItem(key) || "null") || defaultValue
    } catch (e) {
        initialValue = defaultValue
    }

    const item = ref(initialValue);

    watch(item, (value) => {
        if (!value) localStorage.removeItem(key);
        else localStorage.setItem(key, JSON.stringify(value))
    }, { deep })

    const handleStorageChange = (event: StorageEvent) => {
        if (event.key === key) {
            try {
                item.value = JSON.parse(event.newValue || "null")
            } catch (e) {
                console.log("ERROR parsing local storage value")
                item.value = defaultValue
            }
        }
    };

    onMounted(() => {
        window.addEventListener('storage', handleStorageChange);
    });

    onUnmounted(() => {
        window.removeEventListener('storage', handleStorageChange);
    });

    return item;
}