Ukládání preferencí uživatelů ve SvelteKitu

Toto je rychlý návod na ukládání uživatelských preferencí ve SvelteKitu.

Existují 2 způsoby, jak k tomu lze přistupovat. První je implementace autentizačního systému. Ale to může být přehnané, takže další způsob je uložit to lokálně. Pojďme na to.

Takže něco takového... (budu používat tento balíček pro zjednodušení kódu)

let name : string

const saveName = () => {
    Cookie.set("name", name)
}

<input bind:value={name}/>
<button on:click={saveName}>save</button>

No, to bylo snadné.

Malý problém ale nastává, když ho chceme zobrazit.

onMount(() => {
    name = Cookie.get("name")
})

<p>{name}</p>

To funguje, ale protože musíme počkat na document k načtení musíme použít onMount() . To znamená, že po načtení stránky bude zlomek sekundy, kde bude name = undefined . V tomto případě to nebude velký problém, ale pokud by to šetřilo preferenci světlého/tmavého motivu uživatele, povede to k docela negativnímu UX. To se také stane, pokud se spoléháme na něco jako Firebase auth, protože to také závisí na window /document .

Abychom to vyřešili, můžeme přečíst cookie na serveru před úplným načtením stránky.

Nejprve si přečteme sušenku s háčky. Tento handle() funkce se spustí pokaždé, když SvelteKit obdrží požadavek. K usnadnění analýzy souborů cookie použijeme balíček souborů cookie.

import * as cookie from 'cookie';

export const handle : Handle = async ({ event, resolve }) => {
    const { name } = cookie.parse(event.request.headers.get('cookie') || '') as Partial<{ name: string }>;
    if (name) {
        event.locals = { name };
    }
    return await resolve(event)
}

Dále to musíme poslat na frontend. Jedním ze způsobů, jak to udělat, je použít objekt session, který lze číst ve funkci load. Objekt relace můžeme nastavit pomocí getSession(). Od event nejprve prošel funkcí handle, obsahuje name v locals .

export const getSession : GetSession = async (event) => {
    const { name } = event.locals as Partial<{ name: string }>;
    if (!name) return {};
    return { name };
}

Nakonec můžeme získat session objekt ve funkci zatížení, jak je uvedeno níže.

export const load : Load = async ({ session }) => {
    const { name } = session as Partial<{ name: string }>
    return {
        props: {
            name
        }
    }
}

Zde je můj jednoduchý projekt, který to implementuje:

URL:https://niagara.vercel.app

Github:https://github.com/pilcrowOnPaper/niagara