Setting a component's variable to localStorage / global variable value on the initial render #11137
-
|
I'm using Svelte + SvelteKit. I'd like to set the initial value of a variable in my component based on the user's previously saved value in This seems to run once the page has loaded, which in my case means there's a flash of the initial value. I also know I can use But how can I update my component's value based on this global variable / what's obtained in the For CSS, I can attach a class to the Repl: https://svelte.dev/repl/3e4099fc70814541ae837ff7da50926a?version=4.2.7 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
If you are using ssr (which is on by default) the code is executed on the server where the clients localStorage is not available. Therefore you simply can't achieve it. If you need ssr support you have to use another state method like a cookie or the url. Make sure to read the state in a load function. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the reply! I am using SSR. To confirm: even though I can use |
Beta Was this translation helpful? Give feedback.
-
|
The html is generated on the server and localStorage is only available on the client. The generated HTML gets send to your browser which then displays it. Once the browser has loaded all the js files, it will "take over" and will be able to provide the data inside localStorage. The moment when the html from the server is rendered, 'foo' will be your default value of false and once the client has loaded, it will be whatever is inside localStorage. So in short: yes, you can NOT use localStorage for your use case |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the full explanation! |
Beta Was this translation helpful? Give feedback.
If you are using ssr (which is on by default) the code is executed on the server where the clients localStorage is not available. Therefore you simply can't achieve it.
If you need ssr support you have to use another state method like a cookie or the url. Make sure to read the state in a load function.