Ներկայացրեք cookies, sessionStorage և localStorage տարբերությունը։

Cookies, sessionStorage և localStorage - դա վեբ պահեստավորման մեխանիզմներ են, որոնք տարբերվում են նպատակով, կյանքի տևողությամբ և պահվող տվյալների ծավալով:

• Cookies: Փոքր տվյալների կտորներ, որոնք ուղարկվում են վեբ սերվերից և պահվում օգտվողի համակարգչում վեբ բրաուզերի միջոցով: Ուղարկվում են յուրաքանչյուր հաջորդ հարցում նույն սերվերին: Օգտագործվում են նույնականացման, օգտվողի նախընտրությունների պահպանում, գնումների զամբյուղի վիճակի հետևելու համար:

  • Կյանքի ժամկետ: Կանխորոշվում է ստեղծման ժամանակ (կարող է լինել սեսիայի կամ որոշակի ժամկետով):
  • Տարածք: սահմանափակ, սովորաբար մի քանի կիլոբայթ (մոտ 4 KB):

• sessionStorage: պահում է տվյալները միայն մեկ սեսիայի համար (բրաուզերի բացված թաբ կամ պատուհան): Տվյալները ջնջվում են թաբը կամ պատուհանը փակելիս:

  • Կյանքի ժամկետ: մինչև թաբի կամ պատուհանի փակումը:
  • Տարածք: զգալիորեն մեծ, սովորաբար մի քանի մեգաբայթ:

• localStorage: պահում է տվյալները առանց ժամկետի, մինչև որ օգտվողը կամ սցենարը բացահայտորեն ջնջի: հասանելի է բոլոր թաբերում և պատուհաններում նույն դոմենում:

  • Կյանքի ժամկետ: մշտական (մինչև բացահայտ ջնջելը):
  • Տարածք: զգալիորեն մեծ, սովորաբար մի քանի մեգաբայթ:

Ահա համառոտ համեմատություն:

Մեխանիզմ	Կյանքի ժամկետ	Հասանելիություն	Ուղարկվում է սերվերին	Տարածք (տիպիկ)	Նպատակը
Cookies	Սեսիայի կամ ժամկետի ավարտով	HTTP հեդերների միջոցով	Այո	~4 KB	նույնականացում, հետևում, նախընտրություններ
sessionStorage	Մինչ թաբի կամ պատուհանի փակումը	JS API միջոցով	Ոչ	~5-10 MB	Ժամանակավոր տվյալների պահպանում
localStorage	Մշտական (մինչև ջնջելը)	JS API միջոցով	Ոչ	~5-10 MB	Տևական տվյալների պահպանում

Օրինակներ JavaScript API-ի օգտագործման համար:

// Cookies (հասանելի է document.cookie-ով, պահանջում է ձեռքով վերլուծում և սերիալիզացիա)
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(); // Մաքարում է localStorage-ի բոլոր տվյալները