SolidJS•2y 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•2y 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

DikiyOP•2y 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•2y ago

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

DikiyOP•2y ago

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

deluksic•2y 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•2y 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

DikiyOP•2y ago

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

deluksic•2y ago

yeah, seems like you would use makePersisted, createLocalStorage does not exist anymore? or is just deprecated

DikiyOP•2y ago

they don't exist

deluksic•2y ago

https://playground.solidjs.com/anonymous/89fd1a4c-8063-45ee-a99c-4da476a9441c makePersisted definitely exists

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

DikiyOP•2y ago

deluksic•2y ago

how did you install it?

DikiyOP•2y ago

using npm npm install @solid-primitives/storage

deluksic•2y ago

Make sure you have "@solid-primitives/storage": "2.1.4" in your package.json dependencies, then npm install:

deluksic•2y ago

can't help more than that I'm afraid

DikiyOP•2y ago

nothing

deluksic•2y ago

can you try directly importing like I showed?

DikiyOP•2y ago

ok wow, it's working.

deluksic•2y ago

yeah ts can get wonky

DikiyOP•2y ago

he was able to find this function

deluksic•2y ago

But an important thing: you will still want to makePersisted once in your application and not in each component. then you can just import the getter and setter you get from makePersisted into other components need to get back to work! See you later 👋

DikiyOP•2y ago

okay bye 🤑 Thanks a lot 🤩🤩🤩🤩😋😋😋😋🤑🤑

ELSamu•2y ago

Heres a hook that subscribes for events like store event that fires when theres a change in the value stored

ELSamu•2y ago

Then just use it

Gaming

Programming

How to create a reactive localstorage?

Did you find this page helpful?