how to fetch localStorage data on +page.ts with param.slug value in sveltekit project?

Question

I'm new to svelte and was trying to fetch localStorage data on +page.ts with params.slug value but when manually from address bar visited, the page doesn't fetch those data and results in 404.

My data in localStorage is stored as following in array

export interface notejson {
    id: string,
    title: string,
    note: string,
    dateCreated: string,
    dateModified: string,
}

and on +page.ts

...
/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
    // console.log(params.slug)

    let note = get(notedata).find((e)=>e.id === params.slug);

    if (note != undefined) {
        return {
            result: note
        }
    }
    error(404, 'Not found');
}

and store.ts

import { persisted } from 'svelte-persisted-store';

export const notedata = persisted("__notedata",<notejson[]>[]);

and project structure

...
 | src
   ...
   | routes
      | note / [slug]
        +page.svelte
        +page.ts
...

Expecting to get the data on reload and when manually visited

Answer 1

By default SvelteKit renders the first page load server-side. localStorage is not available there so you either get no value if the library protects against invalid access or an exception.

Either only load the data in the browser (e.g. in an onMount block on the page) or disable SSR via the page options.