dev-nuxt Snippets

useState with watch and localStorage.md

const toBool = (val) => {
    return [
        false, 'false', '', null, 'null', undefined, 'undefined',
        '0', 0, 'no', 'n', 'off', 'nao', 'não', 'no', 'n', 'off',
    ].includes(val);
}

const expandDebugContent_FromLs = () => {
    if (typeof localStorage !== 'undefined') {
        return toBool(localStorage?.getItem('expandDebugContent'), false);
    }

    return null;
};

// -------------- most important
const expandDebugContent = useState('expandDebugContent', expandDebugContent_FromLs);

if (expandDebugContent.value === null) {
    expandDebugContent.value = expandDebugContent_FromLs();
}

watch(
    () => expandDebugContent.value,
    () => {
        if (typeof localStorage !== 'undefined') {
            localStorage.setItem('expandDebugContent', expandDebugContent.value);
        }
    }
)
// -------------- most important end