Query String (URL Parametere)
En Query String er delen av en nettadresse (URL) som kommer etter et spørsmålstegn ?.
Det brukes for å sende små mengder data direkte i nettadressen. Dette er genialt for å dele lenker til bestemte
tilstander, for eksempel et produktfilter, sidetall eller et søkeord.
1. Hvordan fungerer det?
Dataen bygges opp med nøkkel=verdi. Hvis man har flere variabler, settes de sammen med &.
I SvelteKit bruker vi $page.url.searchParams for å lese disse verdiene trygt:
import { page } from '$app/stores';
// Hent verdien ('svart') fra url-en
let valgtFarge = $page.url.searchParams.get('farge');
3. ⚠️ Kun for åpne data
Siden informasjonen vises direkte i URL-en (og lagres i nettleserhistorikk og server-logger), MÅ DU ALDRI sende sensitiv data over en Query String. Ikke bruk dette til passord, personnummer eller kredittkort!
2. Test det ut
Skriv inn en kategori under. Legg merke til hvordan URL-en til denne siden endrer seg (se i adressefeltet i nettleseren din!), samtidig som vi fanger opp verdien her på siden.
4. Sende data med HTML-lenker
For å sende data bruker vi oftest vanlige lenker (<a>).
I Svelte kan vi enkelt blande inn variabler ved hjelp av krøllparenteser!
Endre data på samme side
Hvis du bare vil legge til eller endre en Query String på den siden du allerede er på,
trenger du bare å starte lenken med et spørsmålstegn ?.
<a href="?kategori=sko">Se sko</a>
<!-- Vi kan også bruke variabler og & tegnet -->
<a href="?kategori={minKategori}&side={sidetall}">Neste</a>
Sende data til en annen side
I SvelteKit er alle sider bygget opp ved at de ligger i hver sin egen mappe (hvor selve filen alltid heter +page.svelte).
For å lenke til en annen side og sende med en Query String, må vi først peke på den andre mappen, og deretter legge på Query String-en helt til slutt.
Ofte bruker vi ../ for å gå et nivå opp i mappestrukturen først.
<a href="../produkter?kategori={valgtKategori}">Se produkter</a>