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

Matomumo sritis: slapukai yra prieinami tiek kliento, tiek serverio pusėje. sessionStorage ir localStorage yra prieinami tik kliento pusėje.

Gyvavimo laikas: Slapukų gyvavimo laikas nustatomas jų sukūrimo metu (expires arba max-age atributais). Jei nenurodyta, slapukas ištrinamas uždarius naršyklę. sessionStorage saugo duomenis tik esamos sesijos metu (iki kortelės ar naršyklės uždarymo). localStorage saugo duomenis neribotą laiką, kol jie nėra aiškiai ištrinti.

Dydis: Maksimalus slapukų dydis yra apie 4 KB. sessionStorage ir localStorage dydis — nuo 5 MB iki 10 MB, priklausomai nuo naršyklės.

Kiekvieno užklausos siuntimas: Slapukai automatiškai siunčiami su kiekvienu HTTP užklausa į domeną, kuriam jie nustatyti, kas gali padidinti srautą. Duomenys sessionStorage ir localStorage nėra siunčiami į serverį.

Prieigos būdas: prieiga prie slapukų vyksta per document.cookie (eilutė). prieiga prie sessionStorage ir localStorage vyksta per atitinkamus objektus naudojant setItem, getItem, removeItem ir clear metodus.

// Slapuko nustatymas
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Slapuko gavimas
let x = document.cookie;

// Duomenų nustatymas sessionStorage
sessionStorage.setItem("lastname", "Smith");

// Duomenų gavimas iš sessionStorage
let y = sessionStorage.getItem("lastname");

// Duomenų nustatymas localStorage
localStorage.setItem("firstname", "Jane");

// Duomenų gavimas iš localStorage
let z = localStorage.getItem("firstname");

Funkcija	slapukai	sessionStorage	localStorage
Matomumo sritis	Klientas ir serveris	Tik klientas	Tik klientas
Gyvenimo laikas	Nustatomas sukūrimo metu (expires arba max-age), kitaip iki naršyklės uždarymo	Iki kortelės arba naršyklės uždarymo	Neribotas laikas (kol aiškiai ištrintas)
Dydis	~4 KB	~5-10 MB (priklauso nuo naršyklės)	~5-10 MB (priklauso nuo naršyklės)
Siuntimas su užklausa	Taip	Ne	Ne
Prieigos būdas	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem