Sobes.tech
Junior

Објасните разлику између cookies, sessionStorage и localStorage.

sobes.tech АИ

Одговор од АИ

Cookies, sessionStorage и localStorage су механизми за веб складиштење, који се разликују по намени, року трајања и обиму сачуваних података.

  • Колачићи: Мали делови података, које веб сервер шаље и чува на рачунару корисника преко веб прегледача. Шаљу се са сваким следећим захтевом ка истом серверу. Користе се за аутентификацију, чување корисничких преференци, праћење стања корпе за куповину.

    • Рок трајања: Дефинише се приликом креирања (може бити сесијски или са одређеним роком истека).
    • Обим: Ограничен, обично неколико килобајта (око 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