JavaScript Academy · Урок

localStorage и sessionStorage

Выбирайте подходящий срок хранения данных.

Урок 2 из 413 шагов

«localStorage и sessionStorage» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Два хранилища, один API

localStorage и sessionStorage используют одинаковые методы. Различие заключается в сроке хранения: то есть в том, как долго сохраняются данные.

localStorage сохраняет данные

Данные в localStorage хранятся, пока их явно не удалят. Они переживают перезагрузку страницы, закрытие вкладки и перезапуск браузера.

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage временно хранит данные

Данные в sessionStorage существуют только в течение сеанса вкладки. При закрытии вкладки они удаляются.

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

Изоляция по вкладкам

Каждая вкладка браузера получает собственное sessionStorage. Две вкладки одного сайта используют отдельные хранилища сеансов и NOT обмениваются данными.

localStorage является общим

В отличие от него, все вкладки и окна одного источника используют общее localStorage. Запись в одной вкладке видна в остальных.

Поведение при перезагрузке

Обычная перезагрузка сохраняет sessionStorage для этой вкладки. Дублирование вкладки может скопировать сеанс, но новая вкладка открывается пустой.

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

Выбор между хранилищами

Используйте localStorage для долгосрочных настроек (theme, язык). Используйте sessionStorage для временного состояния отдельной вкладки (шага мастера или разового черновика формы).

Предупреждение о безопасности

Ни одно из этих хранилищ не является безопасным. Оба доступны для чтения любому скрипту на странице, поэтому никогда не храните в них пароли или конфиденциальные токены, которые должны оставаться приватными.

Одинаковые методы везде

Поскольку API совпадают, можно заменить одно хранилище другим, изменив только имя объекта. Код, написанный для одного хранилища, будет работать и с другим.

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

Приватный просмотр

В приватном режиме и режиме инкогнито оба хранилища обычно очищаются после завершения сеанса, а некоторые браузеры ограничивают их использование или отключают их. Всегда учитывайте возможность неудачной записи.

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

Отдельная квота

У каждого хранилища собственная квота (обычно около 5 МБ на источник). Заполнение sessionStorage не уменьшает доступный объём localStorage.

Быстрая проверка

Сравнение двух хранилищ.

Ответь в интерактивном уроке

Повторение

Оба хранилища используют один API, но отличаются сроком хранения. localStorage сохраняется между сеансами и является общим для всех вкладок источника; sessionStorage существует только в рамках сеанса одной вкладки и изолирован для неё. Ни одно из них не является безопасным, и у каждого есть собственная квота около 5 МБ.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 59
Уроки: 200

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «localStorage и sessionStorage» бесплатный?

Да — полный текст урока «localStorage и sessionStorage» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «localStorage и sessionStorage»?

Выбирайте подходящий срок хранения данных. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «localStorage и sessionStorage»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy