Paaiškinkite skirtumą tarp cookies, sessionStorage ir localStorage.

Cookies saugo nedidelius teksto duomenų kiekius (iki 4KB) kliento pusėje, siunčiami su kiekvienu HTTP užklausimu į tą domeną, kuris juos sukūrė. Gali turėti galiojimo laiką. Naudojami autorizacijai, vartotojų sekimui, vartotojo nuostatų išsaugojimui.

localStorage saugo duomenis be galiojimo laiko (kol vartotojas jų neištrina arba naršyklė neužsidaro) kliento pusėje (iki 5-10MB, priklausomai nuo naršyklės). Duomenys pasiekiami tarp naršyklės seansų, bet tik iš tos pačios kilmės (domeno, protokolo, prievado) skriptuose. Jie automatiškai nesiunčiami su HTTP užklausomis. Naudojama ilgalaikiam duomenų saugojimui, programėlės nustatymų išsaugojimui.

sessionStorage saugo duomenis vienos sesijos metu (kol skirtukas arba langas atidaryti). Duomenys ištrinami uždarius skirtuką arba langą. Saugojimo dydis panašus į localStorage (iki 5-10MB). Duomenys pasiekiami tik iš tos pačios kilmės skriptų. Jie automatiškai nesiunčiami su HTTP užklausomis. Naudojama laikina duomenų saugykla, aktuali dabartinei sesijai.

Savybės	Cookies	localStorage	sessionStorage
Laikotarpis	Galiojimo laikas arba naršyklės uždarymas	Kol vartotojas jų neištrina arba neištrina	Kol skirtukas arba langas atidarytas
Duomenų dydis	Iki 4KB	Iki 5-10MB	Iki 5-10MB
Pasiekiamumas	Siunčiami su HTTP užklausomis į domeną	Tik per JavaScript iš tos pačios kilmės	Tik per JavaScript iš tos pačios kilmės
Tarp skirtukų prieinamumas	Taip	Taip	Ne (skirtingų skirtukų atveju)
Paskirtis	Autentifikacija, sekimas, nuostatos	Ilgalaikis saugojimas, nustatymai	Laikinas saugojimas sesijos metu

localStorage naudojimo pavyzdys:

// Duomenų išsaugojimas
localStorage.setItem('userName', 'Alice');

// Duomenų gavimas
const userName = localStorage.getItem('userName');
console.log(userName); // Išvestis: Alice

// Duomenų ištrynimas
// localStorage.removeItem('userName');

// Visų duomenų išvalymas
// localStorage.clear();

sessionStorage naudojimo pavyzdys:

// Duomenų išsaugojimas
sessionStorage.setItem('orderId', '12345');

// Duomenų gavimas
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // Išvestis: 12345

// Duomenų ištrynimas
// sessionStorage.removeItem('orderId');

// Visų duomenų išvalymas
// sessionStorage.clear();