Next.js 15 -fullstack-kehitys (App Router + Server Actions) · Oppitunti

Tilan tallentaminen localStorageen

Oppitunti 4/413 vaihetta

Tilan tallentaminen localStorageen on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Miksi tila kannattaa säilyttää?

React-tila katoaa oletusarvoisesti sivun uudelleenlatauksen yhteydessä. Säilytys tallentaa esimerkiksi teeman, ostoskorin sisällön tai luonnostekstin selaimeen, joten tiedot säilyvät päivitysten ja myöhempien käyntien yli.

localStoragen esittely

localStorage on selaimen avain–arvo-tietovarasto, joka säilyttää merkkijonot pysyvästi. Se on synkroninen ja sidottu alkuperään.

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

Olioiden tallentaminen

localStorage sisältää vain merkkijonoja, joten muunna oliot tallennettaessa muotoon JSON.stringify-toiminnolla ja lue ne takaisin JSON.parse-toiminnolla.

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

SSR-ongelma

Next.js renderöi komponentit ensin palvelimella, missä window- ja localStorage-oliot eivät ole käytettävissä. Niiden käyttäminen renderöinnin aikana aiheuttaa virheen.

localStorage-tiedot on luettava vasta, kun komponentti on liitetty selaimessa.

Turvallinen lukeminen useEffectissä

Lue säilytetty tila useEffect-toiminnon sisällä, sillä se suoritetaan vain asiakaspuolella. Käytä palvelimen renderöinnissä turvallista oletusarvoa.

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

Tietojen kirjoittaminen muutoksen yhteydessä

Synkronoi tila takaisin localStorageen aina sen muuttuessa käyttämällä toista efektiä.

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

Hydraation täsmäämättömyyden välttäminen

Jos palvelin renderöi arvon 'light' mutta asiakas näyttää heti arvon 'dark', React varoittaa hydraation täsmäämättömyydestä. Renderöi säilytetty käyttöliittymä vasta, kun mounted-lippu on tosi.

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

Zustand-tilojen säilyttäminen

Zustand sisältää persist-middleware-komponentin, joka tallentaa koko tilan automaattisesti localStorageen. Kääri tilan luontifunktio sen ympärille.

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' }
));

Säilytettävien tietojen valitseminen

Harvoin on tarpeen säilyttää kaikkea. Käytä partialize-toimintoa vain tarpeellisten kenttien tallentamiseen ja pidä väliaikainen käyttöliittymätila muistissa.

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

Versiointi ja migraatio

Kun tilan rakenne muuttuu, kasvata version-arvoa ja tarjoa migrate-funktio, jotta vanhat tallennetut tiedot päivitetään eivätkä riko sovellusta.

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

Parhaat käytännöt

Säilytä tila vastuullisesti:

Muodosta olioista merkkijonoja JSON-muodossa
Lue tiedot vain asiakaspuolella SSR-virheiden välttämiseksi
Estä hydraation täsmäämättömyydet
Käytä Zustandin persist-toimintoa yhdessä partialize- ja versioning-ominaisuuksien kanssa

Pikatarkistus

Testaa tilan säilyttämistä koskevat tietosi.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit säilyttämään asiakaspuolen tilan:

Tallenna merkkijonot localStorage-säilöön ja muunna oliot JSON-muotoon
Lue tiedot useEffect-toiminnossa ja käytä mounted-lippua suojauksena
Käytä Zustandin persist-middleware-komponenttia yhdessä partialize-ominaisuuden ja versioitujen migraatioiden kanssa

Sovelluksesi muistaa nyt käyttäjän tilan uudelleenlatausten välillä.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tilan tallentaminen localStorageen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Tilan tallentaminen localStorageen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tilan tallentaminen localStorageen”?

Säilyttäkää client-tila sivun uudelleenlatausten yli tallentamalla se localStorageen, käsittelemällä hydraatio turvallisesti Next.js:ssä ja käyttämällä Zustandin persist middleware -väliohjelmistoa. Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Tilan tallentaminen localStorageen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?

Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Next.js 15 -fullstack-kehitys (App Router + Server Actions)