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

До localStorage разработчики часто использовали cookies, но они были не очень удобны: мало места и постоянная передача данных туда-сюда. LocalStorage появился, чтобы сделать процесс более простым и эффективным.

Как хранятся данные в localStorage

В localStorage данные хранятся в формате пары ключ-значение, причём и ключ, и значение всегда сохраняются в виде строк. Даже если вы сохраните числовое или логическое значение, оно автоматически преобразуется в строку.

Сохраняем число или булевскую переменную:

localStorage.setItem('number', 123);
localStorage.setItem('boolean', true);

При извлечении в обоих случаях будет строка:

console.log(localStorage.getItem('number')); // "123"
console.log(localStorage.getItem('boolean')); // "true"

Если вам нужно сохранить более сложные структуры данных, например, объекты или массивы, используйте JSON.stringify() для их преобразования в строку перед сохранением и JSON.parse() для преобразования обратно после извлечения:

const user = {
  name: "Alex",
  age: 25
};

// Сохранение объекта в localStorage
localStorage.setItem('user', JSON.stringify(user));

// Извлечение объекта из localStorage
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // "Alex"

Таким образом, несмотря на то что в localStorage можно сохранять только строки, с помощью JSON вы можете эффективно работать с более сложными типами данных.

В каких случаях пригодится localStorage

Сохранение пользовательских настроек

Например, если на сайте можно выбирать светлую или темную тему, чтобы каждый раз не переключать, можно использовать следующий код:

// Проверяем, установлена ли тема 'dark' в localStorage
if (localStorage.getItem('theme') === 'dark') { 
  // Если установлена темная тема, применяем ее к body документа
  document.body.classList.add('dark-mode');
}

Сокращение запросов к серверу

Если не хочется каждый раз обращаться к серверу за данными, можно сохранить их в localStorage:

// Пытаемся получить данные из localStorage по ключу 'someData'
const cachedData = localStorage.getItem('someData');

// Проверяем, существуют ли данные в кэше
if (cachedData) {
  // Если данные существуют, преобразуем их из строки в объект или массив и обрабатываем
  processData(JSON.parse(cachedData));
} else {
  // Если данных в кэше нет, делаем запрос к серверу за данными
  fetchDataFromServer().then(data => {
    // После получения данных сохраним их в localStorage для дальнейшего использования
    localStorage.setItem('someData', JSON.stringify(data));

    // Обрабатываем полученные с сервера данные
    processData(data);
  });
}

Работа без интернета

Приложения, которые могут работать без интернета (например, список задач), могут использовать localStorage для хранения информации:

// Пытаемся получить список задач из localStorage. Если его нет, используем пустой массив.
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// Функция для добавления задачи
function addTask(task) {
    // Добавляем новую задачу в массив
    tasks.push(task);

    // Сохраняем обновленный список задач в localStorage
    localStorage.setItem('tasks', JSON.stringify(tasks));

    // Обновляем отображение списка задач на странице (предполагается, что функция renderTasks определена где-то еще)
    renderTasks();
}

Как очистить localStorage

Чтобы очистить localStorage с помощью JavaScript, вы можете использовать метод clear(). Этот метод удаляет все пары ключ-значение из localStorage для текущего домена. После выполнения этого кода весь localStorage будет полностью очищен:

localStorage.clear();

Если вы хотите удалить конкретное значение из localStorage, используйте метод removeItem(), указав ключ, который хотите удалить:

localStorage.removeItem('keyName');

Так, значение, связанное с keyName, будет удалено, а остальные данные в localStorage останутся нетронутыми.

Не храните важные данные в localStorage

Есть несколько ситуаций, при которых данные могут быть потеряны или удалены:

  1. Очистка браузера. Если пользователь решит вручную очистить историю браузера и данные сайтов, localStorage тоже очистится.
  2. Ограничение по размеру. Каждый браузер имеет свои ограничения на размер данных, который может быть сохранен в localStorage (обычно около 5–10 мегабайт). Если попытаться сохранить больше данных, чем позволяет лимит, предыдущие данные не будут удалены, но новые не сохранятся.
  3. Инкогнито-режим. Если пользователь открывает сайт в режиме инкогнито или приватного просмотра, localStorage может быть доступен для текущей сессии, но данные будут потеряны после закрытия этой сессии.
  4. Политика Same-Origin. localStorage привязан к конкретному домену, протоколу и порту. Это означает, что если вы сохраните что-то на http://example.com, вы не сможете получить доступ к этим данным с https://example.com или http://sub.example.com.
  5. Осознанное удаление разработчиком. Код на сайте может намеренно удалять или перезаписывать данные в localStorage. Например, в списке задач, как мы рассмотрели выше.
  6. Ограничение места на устройстве. Если на устройстве пользователя закончится свободное место, некоторые браузеры могут автоматически очистить localStorage.

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

Так что localStorage — это ещё один маленький помощник для фронтендера. Но, как и все инструменты, его стоит использовать с умом и не забывать об ограничениях. Не пытайтесь положить туда слишком много или что-то слишком важное — ведь это не серверная база данных. Но чтобы сделать жизнь пользователя чуть удобнее — самое то!


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Функции в JavaScript: полное руководство для начинающих

Функции в JavaScript: полное руководство для начинающих

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

Читать дальше
JS
  • 16 августа 2025
Как скачать JSON на JavaScript: метод fetch()

Как скачать JSON на JavaScript: метод fetch()

Метод fetch() — это один из ключевых инструментов веб-разработки. Он появился как альтернатива устаревшему XMLHttpRequest и сразу изменил привычный подход к работе с данными в браузере. Сегодня трудно представить приложение без динамической подгрузки: комментарии в соцсетях, бесконечные ленты новостей, онлайн-магазины с фильтрацией товаров — всё это работает благодаря запросам к серверу, которые обрабатываются без перезагрузки страницы.

Читать дальше
JS
  • 13 августа 2025
document.open(), write(), writeln(), close() в браузере: когда можно и когда нельзя

document.open(), write(), writeln(), close() в браузере: когда можно и когда нельзя

Эти методы управляют потоковой записью HTML прямо в документ. Они удобны во время парсинга страницы, но опасны после загрузки: могут стереть текущее содержимое, блокируют поток, ухудшают производительность и плохо сочетаются с современными практиками. Ниже — безопасные сценарии, риски и актуальные альтернативы.

Функция находится в статусе ограниченной доступности в Baseline.

Читать дальше
JS
  • 10 августа 2025
Как работает navigator.credentials: API для входа без пароля

Как работает navigator.credentials: API для входа без пароля

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Как это работает

Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вы можете запросить сохранённые данные с помощью navigator.credentials.get(). Например, при загрузке страницы входа можно попытаться автоматически получить логин и пароль пользователя, если он ранее их сохранил:

const cred = await navigator.credentials.get({
  password: true,
  mediation: 'optional' // чтобы не мешать потоку, если данных нет
});

if (cred) {
  console.log('Получен логин:', cred.id);
  console.log('Пароль:', cred.password);
  // Здесь можно автоматически отправить данные на сервер
}

Если учётные данные доступны, вы можете использовать их для входа без дополнительных действий от пользователя. Это особенно удобно на мобильных устройствах и в приложениях с частыми сессиями.

Можно ли сохранять логин и пароль вручную?

Да, через navigator.credentials.store() вы можете сохранить учётные данные, которые пользователь только что ввёл:

const cred = new PasswordCredential({
  id: 'user@example.com',
  password: '12345678'
});

await navigator.credentials.store(cred);

Теперь при следующем визите вы сможете использовать get(), чтобы получить эти данные без необходимости ручного ввода.

Безопасность

API работает только на HTTPS и требует, чтобы страница была в фокусе. Браузеры могут показывать уведомления, если данные используются без явного действия пользователя — это защита от скрытых запросов.

Поддержка и ограничения

  • Поддерживается в Chrome, Edge, Android WebView.
  • Safari и Firefox поддерживают только часть API или вовсе не поддерживают.
  • Нельзя использовать на сторонних сайтах (только собственный домен).

Это API особенно хорошо подходит для проектов, где важна быстрая авторизация и нет смысла постоянно спрашивать логин-пароль у пользователя.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

JS
  • 3 августа 2025
Как использовать cause для более понятной обработки ошибок в JavaScript

Как использовать cause для более понятной обработки ошибок в JavaScript

Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема. Свойство доступно в Baseline в статусе «Widely Available» с 20 марта 2024 года.

Читать дальше
JS
  • 3 августа 2025
HTTP/3: зачем он нужен и как понять, что он работает

HTTP/3: зачем он нужен и как понять, что он работает

HTTP/3 — это новая версия протокола обмена данными между браузером и сервером. В отличие от предыдущих HTTP/1.1 и HTTP/2, он построен поверх протокола QUIC и использует UDP вместо TCP. Это делает соединения быстрее, стабильнее и безопаснее.

HTTP/3 доступен в Baseline в статусе «Newly Available» с 2024-09-16.

Чем HTTP/3 лучше

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • Быстрее устанавливается соединение. Больше нет отдельной стадии TLS: всё объединено.
  • Меньше задержек. Даже при потере пакета браузер не ждёт восстановления всего потока, как в TCP.
  • Устойчивость к переключениям сети. QUIC сохраняет соединение, даже если пользователь, например, переключился с Wi-Fi на LTE.
  • Безопасность по умолчанию. Все соединения — только через шифрование (TLS 1.3).

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

Как работает

HTTP/3 основан на QUIC — это транспортный протокол от Google, который работает через UDP. Он умеет передавать данные параллельно по разным потокам, не блокируя друг друга при сбоях. QUIC внедрён в современные браузеры и серверные платформы.

Нужно ли что-то делать?

Если вы разработчик сайта или веб-приложения, то скорее всего ничего специально делать не нужно — браузер сам выберет HTTP/3, если сервер его поддерживает. Ваш сайт будет работать быстрее просто потому, что инфраструктура на это перешла.

Если вы настраиваете сервер (например, NGINX или Cloudflare), тогда стоит включить поддержку HTTP/3. На популярных платформах это можно сделать одной строчкой.

Как проверить, используется ли HTTP/3

В Chrome или Edge:

  1. Откройте DevTools → вкладка Network.
  2. Перезагрузите страницу.
  3. Добавьте колонку Protocol (правый клик по шапке таблицы).
  4. Посмотрите, есть ли h3 у запросов — это и есть HTTP/3.

Через терминал (если у вас установлен curl):

curl -I --http3 https://example.com

Если сервер не поддерживает HTTP/3, будет ошибка или произойдёт откат на HTTP/2.

Через JavaScript

На уровне кода нельзя напрямую узнать версию протокола, но можно сделать fetch и посмотреть заголовки ответа через инструменты разработчика:

fetch('https://example.com')
  .then(response => console.log(response.headers))

А затем проверить в DevTools, какой протокол был использован.

Что важно помнить

  • HTTP/3 — это не «фича», которую вы вызываете в коде, а часть транспортного уровня.
  • Он поддерживается большинством современных браузеров: Chrome, Firefox, Edge, Safari.
  • Но он работает только с HTTPS, как и HTTP/2.

Заключение

HTTP/3 делает интернет быстрее, безопаснее и стабильнее — особенно на слабых сетях и мобильных устройствах. Вам не нужно менять HTML, JavaScript или CSS, чтобы получить преимущество. Главное — чтобы сервер и хостинг поддерживали эту технологию.

Если вы разрабатываете сайт с упором на производительность — убедитесь, что HTTP/3 включён. Это шаг вперёд к более отзывчивым и доступным интерфейсам.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

JS
  • 27 июля 2025
Как работает Map в JavaScript

Как работает Map в JavaScript

Коллекция Map — это встроенный объект JavaScript, предназначенный для хранения пар ключ-значение. Она похожа на обычный объект ({}), но обладает важными преимуществами:

  • Любые типы ключей — строки, числа, объекты, функции.
  • Сохранение порядка вставки — перебор идёт в том порядке, в котором вы добавили элементы.
  • Удобные методы для работы — set(), get(), has(), delete(), clear() и итерации через for...of.

Эта структура особенно полезна, если вы хотите чётко контролировать порядок элементов и не ограничиваться только строковыми ключами, как в обычных объектах.

Пример: создаём коллекцию и работаем с ней

? Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

const userInfo = new Map();

userInfo.set('name', 'Алексей'); // строка
userInfo.set(42, 'Число');       // число
userInfo.set(true, 'Булево');    // логическое значение

console.log(userInfo.get(42)); // Выведет: 'Число'

Здесь мы добавили три элемента с разными типами ключей. Именно это отличает Map от обычного объекта — вы можете использовать, например, ключи-объекты или даже функции:

const objKey = { id: 1 };
const fnKey = () => {};

userInfo.set(objKey, 'объект');
userInfo.set(fnKey, 'функция');

console.log(userInfo.get(objKey)); // 'объект'

Перебор Map

Вы можете пройтись по элементам Map с помощью for...of:

for (const [key, value] of userInfo) {
  console.log(key, value);
}

Также доступны методы:

  • map.keys() — только ключи,
  • map.values() — только значения,
  • map.entries() — пары [ключ, значение].
console.log([...userInfo.keys()]); // Все ключи
console.log([...userInfo.values()]); // Все значения

Проверка наличия, удаление и очистка

userInfo.has('name'); // true
userInfo.delete(42);  // удаляет элемент с ключом 42
userInfo.clear();     // полностью очищает Map

Отличия от объектов

ОсобенностьMapObject
Типы ключейлюбыетолько строки и символы
Порядоксохраняетсяне гарантирован
Итерацияпроще и более гибкаятребует Object.entries и т. д.
Производительностьбыстрее на больших объёмахможет быть медленнее

Когда использовать Map

Используйте Map, если:

  • Нужен предсказуемый порядок элементов.
  • Ключами должны быть не только строки.
  • Нужно часто добавлять, удалять или перебирать элементы.
  • Важно избежать конфликтов с ключами вроде __proto__ или hasOwnProperty.

Заключение

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

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

JS
  • 27 июля 2025
10 приёмов работы с console, которые должен знать каждый разработчик

10 приёмов работы с console, которые должен знать каждый разработчик

Консоль разработчика — важный инструмент отладки в JavaScript. С помощью методов console можно выводить информацию о работе скрипта, отслеживать ошибки, логировать данные и анализировать производительность. В браузере это доступно через панель разработчика (DevTools), обычно на вкладке «Console».

Читать дальше
JS
  • 18 июля 2025
Оператор ** в JS: возведение в степень

Оператор ** в JS: возведение в степень

Оператор ** — это современный и лаконичный способ возводить числа в степень в JavaScript. Он появился в стандарте ECMAScript 2016 и заменил собой более громоздкий вызов Math.pow(). Вместо Math.pow(3, 4) теперь можно написать 3 ** 4, что читается и набирается проще.

Читать дальше
JS
  • 25 июня 2025
Полный гайд по объекту Date в JavaScript

Полный гайд по объекту Date в JavaScript

Объект Date позволяет создавать, сравнивать и форматировать дату и время. Используется для отображения текущего времени, вычисления интервалов и работы с таймзонами в веб-приложениях.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

Читать дальше
JS
  • 25 июня 2025