SolidJS•6mo ago

How to create a reactive localstorage?

Hi, I need to create a reactive localstorage for localization on my site but I don't know how to do it, here is my attempt to make one:

const [locale, setLocale] = createStore({
        locale: "en",
    });
    const [localeJson, setLocaleJson] = createSignal(locales[locale.locale]);
    createEffect(() => {
        setLocaleJson(locales[locale.locale]);
    }, locale.locale);

const [locale, setLocale] = createStore({
        locale: "en",
    });
    const [localeJson, setLocaleJson] = createSignal(locales[locale.locale]);
    createEffect(() => {
        setLocaleJson(locales[locale.locale]);
    }, locale.locale);

but it doesn't work because when the page reloads, the value reverts to the original value

25 Replies

thetarnav•6mo ago

the most straightforward way is to just write to local storage when you write to a signal/store and then read from local storage to get the initial value during creating

Дикий•6mo ago

This option is not suitable because I have a lot of components and only in the component where the language is changed it will work.

deluksic•6mo ago

This signal would usually be global, so it should work in other components as well

Дикий•6mo ago

So there is no way without contexts, like you can't just track changes to locastorage?

deluksic•6mo ago

There is no built in way, but it should be really simple to do. Maybe you want to check out https://primitives.solidjs.community/package/storage#createLocalStorage

Solid Primitives

A library of high-quality primitives that extend SolidJS reactivity

thetarnav•6mo ago

you can there is some event listener for that but since you are causing the change you know when it happens also you a global signal doesn’t have to mean context just create it somewhere and import in all files needed

Дикий•6mo ago

I installed it, but it's not there. createStorage