Next.js 15 fullstack (App Router + Server Actions) · Lektion

Spara tillstånd i localStorage

Behåll klienttillståndet efter omladdningar genom att spara det i localStorage, hantera hydrering säkert i Next.js och använda Zustands persist-middleware.

Lektion 4 av 413 steg

Spara tillstånd i localStorage är en gratis lektion i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15 fullstack (App Router + Server Actions), och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Varför spara tillstånd?

Som standard försvinner React-tillstånd när sidan laddas om. Beständig lagring sparar data som tema, innehåll i varukorgen eller utkast till text i webbläsaren, så att den finns kvar efter omladdningar och återbesök.

Möt localStorage

localStorage är ett nyckel-värdelager i webbläsaren som sparar strängar utan tidsbegränsning. Det är synkront och avgränsat till ursprunget.

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

Lagra objekt

localStorage kan bara lagra strängar, så serialisera objekt med JSON.stringify när du sparar dem och med JSON.parse när du läser dem.

localStorage.setItem('cart', JSON.stringify({ items: 3 }));
const cart = JSON.parse(localStorage.getItem('cart') || '{}');

Problemet med SSR

Next.js renderar komponenter på servern först, där window och localStorage inte finns. Om du använder dem under renderingen uppstår ett fel.

Du måste läsa från localStorage först efter att komponenten har monterats i webbläsaren.

Läs säkert i useEffect

Läs det sparade tillståndet inuti useEffect, som endast körs på klienten. Börja med ett säkert standardvärde för serverrenderingen.

'use client';
const [theme, setTheme] = useState('light');
useEffect(() => {
  const saved = localStorage.getItem('theme');
  if (saved) setTheme(saved);
}, []);

Skriv vid ändringar

Synkronisera tillbaka tillståndet till localStorage varje gång det ändras med en annan effekt.

useEffect(() => {
  localStorage.setItem('theme', theme);
}, [theme]);

Undvik hydreringsmismatch

Om servern renderar ”light” men klienten direkt visar ”dark” varnar React för en hydreringsmismatch. Rendera sparat gränssnitt först när flaggan mounted är sann.

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;

Spara Zustand-store

Zustand levereras med en persist-middleware som automatiskt sparar hela din store i localStorage. Omslut din store-skapare med den.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useCart = create(persist(
  (set) => ({ items: [], add: (i) => set((s) => ({ items: [...s.items, i] })) }),
  { name: 'cart-storage' }
));

Välj vad som ska sparas

Du vill sällan spara allt. Använd partialize för att endast spara de fält som är viktiga och behålla tillfälligt gränssnittstillstånd i minnet.

persist(storeFn, {
  name: 'cart-storage',
  partialize: (s) => ({ items: s.items })
});

Versionshantering och migrering

När tillståndets struktur ändras höjer du version och tillhandahåller en migrate-funktion, så att gammal lagrad data uppgraderas i stället för att appen slutar fungera.

persist(storeFn, {
  name: 'cart-storage',
  version: 2,
  migrate: (old, from) => ({ ...old, currency: 'USD' })
});

Bästa praxis

Spara tillstånd på ett ansvarsfullt sätt:

Serialisera objekt med JSON
Läs endast på klienten för att undvika SSR-fel
Skydda mot hydreringsmismatch
Använd Zustand persist med partialize och versionshantering

Snabbtest

Testa dina kunskaper om beständig lagring.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att spara klientens tillstånd:

Lagra strängar i localStorage och serialisera objekt med JSON
Läs i useEffect och skydda med en mounted-flagga
Använd Zustand-middleware persist med partialize och versionshanterade migreringar

Din app kommer nu ihåg användarnas tillstånd mellan omladdningar.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Spara tillstånd i localStorage” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15 fullstack (App Router + Server Actions), inklusive ”Spara tillstånd i localStorage”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15 fullstack (App Router + Server Actions) innehåller totalt 4 lektioner.

Vad lär jag mig i ”Spara tillstånd i localStorage”?

Behåll klienttillståndet efter omladdningar genom att spara det i localStorage, hantera hydrering säkert i Next.js och använda Zustands persist-middleware. Ni övar på Next.js 15 fullstack (App Router + Server Actions) med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15 fullstack (App Router + Server Actions)?

Du behöver inga förkunskaper. Utbildningen i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Spara tillstånd i localStorage”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15 fullstack (App Router + Server Actions)-lektionen?

Ja. Varje Next.js 15 fullstack (App Router + Server Actions)-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Next.js 15 fullstack (App Router + Server Actions)