Обяснете разликата между cookies, sessionStorage и…

Бисквитки, sessionStorage и localStorage - това са механизми за уеб хранилище, които се различават по предназначение, срок на годност и обем на съхраняваните данни.

Бисквитки: Малки фрагменти от данни, изпращани от уеб сървър и съхранявани на компютъра на потребителя от уеб браузъра. Изпращат се с всяка следваща заявка към същия сървър. Използват се за удостоверяване, съхраняване на предпочитания на потребителя, проследяване на състоянието на кошницата за пазаруване.
- Срок на годност: Определя се при създаване (може да бъде сесийна или с определен срок на изтичане).
- Обем: Ограничен, обикновено няколко килобайта (около 4 KB).
sessionStorage: Съхранява данни само за една сесия на браузъра (отворена таб или прозорец). Данните се изтриват при затваряне на таба или прозореца.
- Срок на годност: До затваряне на таба или прозореца.
- Обем: Значително по-голям от този на бисквитките (обикновено няколко мегабайта).
localStorage: Съхранява данни без срок на годност, докато не бъдат явно изтрити от потребителя или сценарий. Достъпен е във всички табове и прозорци на един и същ домейн.
- Срок на годност: Постоянен (до явно изтриване).
- Обем: Значително по-голям от този на бисквитките (обикновено няколко мегабайта).

Ето кратко сравнение:

Механизъм	Срок на годност	Достъпност	Изпраща се към сървъра	Обем (типичен)	Назначение
Бисквитки	Сесийна или с изтичане на срок	Чрез HTTP заглавки	Да	~4 KB	Удостоверяване, проследяване, предпочитания
sessionStorage	До затваряне на таба/прозореца	Чрез JS API	Не	~5-10 MB	Временна съхранение на данни за сесията
localStorage	Постоянен (до изтриване)	Чрез JS API	Не	~5-10 MB	Дългосрочно съхранение на данни

Примери за използване на JavaScript API:

// Бисквитки (достъп чрез 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

Обяснете разликата между cookies, sessionStorage и localStorage.