How can I fix "sessionStorage is not defined" in Svelte?

Question

I'm new in Svelte and I'm trying to set some info into sessionStorage but it is throwing "sessionStorage is not defined". I realised that I received this error because it's running on the server side.

I created a component at /src/components/nav.svelte that uses /src/domain/auth/service.js and the error occurs in the last one.

Searching on the web I found that in this case I must use sessionStorage inside onMount function. Is that the right way?

How can I avoid that my code get a little mess?

Gentes

what data you are trying to store? are you going to use the data in both server side and client side? – Charcoal

You indeed found the correct answer. You would use sessionStorage inside the onMount function as this will only run when your attaching the component on the client. The cost inside onMount will specifically NOT run on the server so that you are able to lazily load data on the client side. – Ryder

I put code which contains sessionStorage into functions and it stopped complains. But now it shows me the following warning: "Using browser-only version of superagent in non-browser environment" Do I need to worry about it? Thank you! – Gentes

Answer 1

You could try to check if you're actually in a browser environment, e.g. something like

if (window && window.sessionStorage) {
    // do your stuff with sessionStorage
}

or

if (typeof window !== 'undefined') {
    // do your stuff with sessionStorage
}

Alaynaalayne

For me, the latter works but the former doesn't (SvelteKit): ReferenceError: window is not defined – Vereen

Note to self: Don't call sessionStorage.setItem() in a reactive statement ($:) since it will reset the stored value to the initial state on every refresh. – Vereen

Answer 2

hey you need to use onMount

import { onMount } from 'svelte';

onMount(() => {
    sessionStorage.setItem('myWork', 'Developer');
});

Feline

Or, you may need afterUpdate instead of onMount, to trigger some action on dom update. For me, after await goto(/);, need to use afterUpdate to read sessionStorage to make sure it works, when use onMount I need a refresh by hand sometimes. – Diet

Answer 3

While exsides approach is valid, Sveltekit's recommended approach is;

import { browser } from '$app/environment';

then

if (browser) {
    // do your stuff with sessionStorage...
}

Inhibit

Nice, thanks for the addition, didn't know about that one! Did that exist at the time I wrote the answer? – Alaynaalayne

I don't think it was. 😁 – Inhibit

@Alaynaalayne I think it was introduced recently, in the last 2 years maybe. it is the one I use more often since it makes sense semantically speaking. – Shevlo