Selgitage vahe cookies, sessionStorage ja localStorage vahel.

Cookies salvestavad väikese koguse tekstilist teavet (kuni 4KB) kliendi poolel, saadetakse iga HTTP-päringuga domeenile, mis need seadistas. Neil võib olla kehtivusaeg. Neid kasutatakse autoriseerimiseks, kasutajate jälgimiseks, kasutaja eelistuste salvestamiseks.

localStorage salvestab andmeid ilma kehtivusajata (kuni kasutaja need kustutab või brauserit sulgeb) kliendi poolel (kuni 5-10MB, sõltuvalt brauserist). Andmed on saadaval brauseri sessioonide vahel, kuid ainult sama päritoluga (domeen, protokoll, port) skriptidele. Need ei saadeta automaatselt HTTP-päringutega. Kasutatakse püsivaks andmete salvestamiseks, rakenduse seadete säilitamiseks.

sessionStorage salvestab andmeid ühe sessiooni jooksul (kuni vaheleht või aken on avatud). Andmed kustutatakse vahelehe või akna sulgemisel. Salvestusmaht on sarnane localStorage-ga (kuni 5-10MB). Andmed on saadaval ainult sama päritoluga skriptidele. Need ei saadeta automaatselt HTTP-päringutega. Kasutatakse ajutiseks andmete salvestamiseks, kehtivaks sessiooniks.

Omadused	Cookies	localStorage	sessionStorage
Säilitamise aeg	Kehtivusaeg või brauseri sulgemine	Kuni kasutaja kustutab või eemaldab	Kuni vaheleht või aken on avatud
Andmete suurus	Kuni 4KB	Kuni 5-10MB	Kuni 5-10MB
Juurdepääs	Saadetakse HTTP-päringutega domeenile	Ainult sama päritoluga JavaScript-iga	Ainult sama päritoluga JavaScript-iga
Vahekaartide vaheline juurdepääs	Jah	Jah	Ei (erinevate vahelehtede puhul)
Otstarve	Autentimine, jälgimine, eelistused	Püsiv salvestus, seaded	Ajutine salvestus sessiooni jooksul

Näide localStorage kasutamisest:

// Andmete salvestamine
localStorage.setItem('userName', 'Alice');

// Andmete lugemine
const userName = localStorage.getItem('userName');
console.log(userName); // Väljund: Alice

// Andmete kustutamine
// localStorage.removeItem('userName');

// Kogu salvestusruumi puhastamine
// localStorage.clear();

Näide sessionStorage kasutamisest:

// Andmete salvestamine
sessionStorage.setItem('orderId', '12345');

// Andmete lugemine
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // Väljund: 12345

// Andmete kustutamine
// sessionStorage.removeItem('orderId');

// Kogu salvestusruumi puhastamine
// sessionStorage.clear();