Selgitage erinevust küpsiste, sessionStorage ja localStorage vahel.

Küpsised, sessionStorage ja localStorage on veebipõhised salvestusmehhanismid, mis erinevad eesmärgi, eluea ja salvestatud andmete mahu poolest.

• Küpsised: Väikesed andmefragmendid, mida veebiserver saadab ja salvestab kasutaja arvutisse veebibrauseri kaudu. Saadetakse iga järgmise päringuga samale serverile. Kasutatakse autentimiseks, kasutaja eelistuste salvestamiseks, ostukorvi oleku jälgimiseks.

  • Eluaeg: Määratakse loomise ajal (võib olla sessiooniline või kindla aegumisega).
  • Maht: Piiratud, tavaliselt mõned kilobaiti (umbes 4 KB).

• sessionStorage: Salvestab andmeid ainult ühe sessiooni jooksul (avatud vahelehel või aknas). Andmed kustutatakse vahelehe või akna sulgemisel.

  • Eluaeg: Kuni vahelehe või akna sulgemiseni.
  • Maht: Märkimisväärselt suurem kui küpsistel (tavaliselt mõned megabaiti).

• localStorage: Salvestab andmeid ilma aegumise piiranguta, kuni kasutaja või skript need eemaldab. Saadaval kõigis vahelehtedes ja akendes samal domeenil.

  • Eluaeg: Püsiv (kuni eemaldatakse).
  • Maht: Märkimisväärselt suurem kui küpsistel (tavaliselt mõned megabaiti).

Siin on lühike võrdlus:

Mehhanism	Eluaeg	Juurdepääs	Saadetakse serverile	Maht (tavaline)	Otstarve
Cookies	Sessiooni või aegumisega	HTTP päiste kaudu	Jah	~4 KB	Autentimine, jälgimine, eelistused
sessionStorage	Kuni vahelehe või akna sulgemiseni	JS API kaudu	Ei	~5-10 MB	Ajutine sessiooni andmete salvestamine
localStorage	Püsiv (kuni eemaldatakse)	JS API kaudu	Ei	~5-10 MB	Pikaajaline andmete salvestamine

JavaScript API näited:

// Cookies (saadaval document.cookie kaudu, nõuab käsitsi analüüsi ja serialiseerimist)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Tühjendab kõik andmed localStorage'is