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

Sausainiai, sessionStorage ir localStorage yra žiniatinklio saugyklos mechanizmai, kurie skiriasi pagal paskirtį, galiojimo laiką ir saugomų duomenų kiekį.

• Cookies: Maži duomenų fragmentai, kuriuos siųs žiniatinklio serveris ir saugos naudotojo kompiuteryje naršyklės pagalba. Siunčiami su kiekvienu vėlesniu prašymu į tą patį serverį. Naudojami autentifikacijai, naudotojo nuostatų saugojimui, pirkinių krepšelio būsenos stebėjimui.

  • Galiojimo laikas: Nustatomas sukūrimo metu (gali būti sesijos arba su nustatytu pasibaigimo laiku).
  • Kiekis: Ribotas, paprastai kelių kilobaitų (apie 4 KB).

• sessionStorage: Saugo duomenis tik vienai naršyklės sesijai (atidarytam skirtukui arba langui). Duomenys ištrinami uždarius skirtuką arba langą.

  • Galiojimo laikas: Iki skirtuko arba lango uždarymo.
  • Kiekis: Žymiai didesnis nei cookies (paprastai kelių megabaitų).

• localStorage: Saugo duomenis be galiojimo laiko, kol naudotojas arba scenarijus aiškiai jų neištrina. Pasiekiama visuose to paties domeno skirtukuose ir languose.

  • Galiojimo laikas: Nuolatinis (iki aiškaus ištrynimo).
  • Kiekis: Žymiai didesnis nei cookies (paprastai kelių megabaitų).

Štai trumpas palyginimas:

Mechanizmas	Galiojimo laikas	Pasiekiamumas	Siunčiasi į serverį	Kiekis (įprastas)	Paskirtis
Cookies	Sesijos arba pasibaigus galiojimo laikui	Per HTTP antraštes	Taip	~4 KB	Autentifikacija, stebėjimas, nuostatos
sessionStorage	Iki skirtuko arba lango uždarymo	Per JS API	Ne	~5-10 MB	Laikinas sesijos duomenų saugojimas
localStorage	Nuolatinis (iki ištrynimo)	Per JS API	Ne	~5-10 MB	Ilgalaikis duomenų saugojimas

JavaScript API pavyzdžiai:

// Cookies (pasiekiama per document.cookie, reikalauja rankinio analizės ir serializacijos)
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(); // Išvalo visus duomenis localStorage