Хранение в браузере on JSFlow

localStorage и sessionStorage

Mon, 01 Jan 0001 00:00:00 +0000

localStorage и sessionStorage #

Web Storage — два связанных хранилища в браузере: localStorage (данные живут, пока их не удалят) и sessionStorage (данные привязаны к вкладке и сессии). Оба хранят только строки; объекты нужно сериализовать.

Базовые операции #

API одинаков для обоих объектов:

localStorage.setItem('theme', 'dark')
localStorage.getItem('theme') // "dark"
localStorage.removeItem('theme')
localStorage.clear() // осторожно: удаляет всё для origin

Ключи уникальны в пределах origin. Значение 'undefined' и отсутствие ключа — разные вещи: getItem вернёт null, если ключа нет.

Куки обзор

Mon, 01 Jan 0001 00:00:00 +0000

Куки обзор #

Cookie (куки) — небольшие пары «имя=значение», которые браузер прикрепляет к запросам на тот же сайт. Сервер выставляет их заголовком Set-Cookie; JavaScript может читать и записывать часть кук через document.cookie, но с важными ограничениями.

Сервер отвечает, например:

Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Lax

Браузер сохраняет cookie и отправляет её обратно:

Cookie: sessionId=abc123

Так поддерживают сессии входа, корзины на сервере, A/B-тесты и аналитику — в зависимости от настроек.

IndexedDB

Mon, 01 Jan 0001 00:00:00 +0000

IndexedDB #

IndexedDB — встроенная в браузер объектная база данных для структурированных записей, файлов и больших массивов. В отличие от localStorage, API асинхронный, лимиты выше, а данные индексируются по ключам. Подходит для офлайн-черновиков, кэша плейлистов и очереди синхронизации — когда Web Storage уже тесен.

Открытие базы #

Работа идёт через indexedDB.open. Имя и версия задают схему; при повышении версии срабатывает upgradeneeded:

const request = indexedDB.open('jsflow-app', 1)

request.onupgradeneeded = (event) => {
 const db = event.target.result
 if (!db.objectStoreNames.contains('tracks')) {
 db.createObjectStore('tracks', { keyPath: 'id' })
 }
}

request.onsuccess = (event) => {
 const db = event.target.result
 console.log('База готова', db.name, db.version)
}

request.onerror = () => {
 console.error('Не удалось открыть IndexedDB')
}

В upgradeneeded создают object store (аналог таблицы) и индексы. Вне этой фазы схему менять нельзя — только bump версии.

Хранение в браузере on JSFlow

localStorage и sessionStorage

localStorage и sessionStorage #

Базовые операции #

Куки обзор

Куки обзор #

Как выглядит cookie #

IndexedDB

IndexedDB #

Открытие базы #