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 localStorage. I can get it to load after the initial load using:
let foo = false;
if (browser) {
foo = localStorage.collapsed === 'true'
}
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 <svelte:head> to get the initial localStorage value before the page renders:
<svelte:head>
<script>
if (localStorage.foo === 'true') {
window.foo = true;
}
</script>
</svelte:head>
But how can I update my component's value based on this global variable / what's obtained in the <head>?
For CSS, I can attach a class to the documentElement or body but that doesn't help me here.
Repl: https://svelte.dev/repl/3e4099fc70814541ae837ff7da50926a?version=4.2.7
Unless you forego server side rendering and defer the rendering until you are on the client it is not possible (there is no way for the server to know what a user has in localStorage).
You can wrap your entire component in
{#if browser}, turn off SSR, and some other techniques.Alternatively, store the data in a cookie, these are sent for every request and therefore available on the server.