Кратко

localStorage — это простое постоянное хранилище в браузере для пар «ключ–значение». Оно отлично подходит для кеширования настроек, счётчиков и данных интерфейса, которые не являются конфиденциальными. Не используйте localStorage для паролей, токенов доступа или другой чувствительной информации.

Важно

• Данные в localStorage сохраняются между сессиями браузера и доступны страницам с тем же происхождением (origin).
• Все значения хранятся как строки (UTF-16 DOM String). Для объектов и массивов используйте JSON.stringify и JSON.parse.
• Объём обычно ограничен несколькими мегабайтами (часто ~5 МБ).

Что такое localStorage

localStorage — часть Web Storage API, поддерживаемого современными браузерами. Это синхронное key–value хранилище, доступное через объект window.localStorage. Ключи и значения — строки; для хранения структурированных данных их надо сериализовать.

Ключевые методы и свойства

• setItem(key, value) — сохранить значение по ключу;
• getItem(key) — получить значение по ключу (строка или null);
• removeItem(key) — удалить ключ;
• clear() — очистить всё хранилище для текущего origin;
• key(index) — получить ключ по позиции;
• length — количество сохранённых пар.

Краткая однострочная дефиниция

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

localStorage и sessionStorage: сравнение

Когда выбрать

• localStorage — если данные должны пережить закрытие вкладки и быть доступны при следующем возврате.
• sessionStorage — если данные нужны только в рамках одной сессии (например, временный state при оплате).

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

Доступ к API осуществляется через window.localStorage. Ниже — примеры основных операций. Код можно запускать в консоли браузера или в скрипте страницы.

Сохранение простого значения

window.localStorage.setItem('Python', 'Guido van Rossum');

Здесь ‘Python’ — ключ, ‘Guido van Rossum’ — значение (строка).

Сохранение объектов и массивов

JSON.stringify преобразует объекты и массивы в строки для хранения:

const student = {
    name: "Yuvraj",
    marks: 85,
    subject: "Machine Learning"
}

const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem('result', JSON.stringify(student));
window.localStorage.setItem('marks', JSON.stringify(scores));

Чтение значений

let data1 = window.localStorage.getItem('Python');
let data2 = window.localStorage.getItem('result');

console.log(data1);
console.log(data2);

Вывод:

Guido van Rossum
{"name":"Yuvraj","marks":85,"subject":"Machine Learning"}

Чтобы превратить строку обратно в объект, используйте JSON.parse:

let data2 = JSON.parse(window.localStorage.getItem('result'));
console.log(data2);

Удаление и очистка

Удаление одного ключа:

window.localStorage.removeItem('Python');

Очистить всё:

window.localStorage.clear();

Длина и перебор

let len = localStorage.length;
console.log(len);

for (let i = 0; i < localStorage.length; i++){
    let key = localStorage.key(i);
    let value = localStorage.getItem(key);
    console.log(key, value);
}

Метод key(i) возвращает ключ по индексу и полезен для перебора всех пар.

Простой проект: счётчик очков на localStorage

Ниже — минимальная локализация проекта. Создайте index.html и script.js в одной папке.

index.html

    
localStorage в JavaScript
    Увеличить счёт
    Уменьшить счёт
    Очистить localStorage
    
Счёт:
    

    
Нажмите «Увеличить счёт», чтобы добавить 1.
    
Нажмите «Уменьшить счёт», чтобы вычесть 1.
    
Нажмите «Очистить localStorage», чтобы удалить все данные.
    

        Можно закрыть вкладку или браузер и вернуться: данные сохранятся.
    
    

script.js

function increaseCounter() {
    var count = Number(window.localStorage.getItem("count"));
    count += 1;
    window.localStorage.setItem("count", count);
    document.getElementById("score").innerHTML = count;
}

function decreaseCounter() {
    var count = Number(window.localStorage.getItem("count"));
    count -= 1;
    window.localStorage.setItem("count", count);
    document.getElementById("score").innerHTML = count;
}

function clearCounter() {
    window.localStorage.clear();
    document.getElementById("score").innerHTML = "";
}

// Инициализация при загрузке страницы
window.addEventListener('load', function() {
    const init = window.localStorage.getItem("count");
    if (init !== null) {
        document.getElementById("score").innerHTML = init;
    } else {
        document.getElementById("score").innerHTML = 0;
    }
});

Пояснения

• При первом вызове getItem(‘count’) вернётся null, Number(null) → 0, поэтому специальная обработка не требуется.
• Все операции синхронные, поэтому их использование в горячих циклах стоит минимизировать.

Практические советы и эвристики

• Храните только маленькие, не чувствительные объекты и предпочтительно простые структуры (настройки UI, идентификаторы, кешированные ответы без PII).
• Всегда валидируйте и парсите данные из localStorage перед использованием.
• Для больших объёмов или структурированных БД используйте IndexedDB.
• Для токенов аутентификации предпочитайте HttpOnly cookies или secure storage на сервере.

Когда localStorage не подойдёт

• Нужно хранить секреты или токены доступа.
• Требуется транзакционная консистентность или более 5 МБ данных.
• Нужно асинхронное/фоновое или потоковое хранение большого объёма данных — используйте IndexedDB.
• В приложениях с несколькими пользователями на одном устройстве, где требуется изоляция сессий.

Альтернативные подходы

• Cookies — хороши для данных, которые должны отправляться на сервер автоматически, но имеют ограниченный размер и влияют на заголовки HTTP.
• IndexedDB — асинхронная клиентская БД для больших объёмов и сложных структур.
• Service Worker Cache API — кеширование запросов/ресурсов для offline-first приложений.

Безопасность и приватность

• Не храните чувствительные данные (пароли, токены, PII) в localStorage: скрипты на странице могут получить к ним доступ.
• При обработке пользовательских данных учитывайте требования GDPR: информируйте пользователя, зачем вы храните данные, и дайте возможность удаления.
• При необходимости удаления под клиентским запросом реализуйте кнопку «Удалить мои данные» и очищайте все ключи, относящиеся к пользователю.

Советы по защите

• Минимизируйте доступ стороннего JavaScript на страницах с критичными данными.
• Используйте Content Security Policy (CSP) для ограничения инъекций скриптов.
• Валидируйте и очищайте данные при чтении из localStorage.

Роль‑ориентированные чек‑листы

Для разработчика

• Проверить сериализацию/десериализацию (JSON.stringify/JSON.parse).
• Обработать случаи null и некорректных значений.
• Не хранить секретов.
• Обновить документацию и миграции при изменении формата ключей.

Для тестировщика

• Тесты на перегрузку размером и граничные условия (приблизительно до лимита браузера).
• Тесты на совместный доступ: открытие нескольких вкладок одновременно.
• Тесты на очистку и восстановление после закрытия вкладки.

Для продукт‑менеджера

• Решить, какие данные нужно сохранять локально и какие на сервере.
• Установить политику хранения и сроков удаления данных.
• Убедиться, что пользователь понимает, что сохраняется локально.

Мини‑методология внедрения localStorage

1. Спроектировать ключи и формат (использовать namespace, например myapp.settings.theme).
2. Выбрать TTL/стратегию актуализации (включая явное обновление при старении данных).
3. Реализовать слой-обёртку для безопасного доступа (get/set/remove), централизующий проверки и логирование.
4. Написать тесты на ошибки парсинга и отсутствие ключей.
5. Документировать поведение: когда очищается, как мигрировать старые ключи.

Пример обёртки

const storage = {
  get(key) {
    try {
      const v = window.localStorage.getItem(key);
      return v === null ? null : JSON.parse(v);
    } catch (e) {
      console.warn('Ошибка чтения localStorage', e);
      return null;
    }
  },
  set(key, value) {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (e) {
      console.warn('Ошибка записи localStorage', e);
    }
  },
  remove(key) {
    window.localStorage.removeItem(key);
  },
  clear() {
    window.localStorage.clear();
  }
};

Критерии приёмки

• Данные сохраняются и восстанавливаются после перезапуска браузера.
• Формат ключей и версия схемы задокументированы.
• Приложение корректно обрабатывает устаревшие или повреждённые данные.
• Нет хранения секретов и PII.
• Пройдены тесты на многовкладочный доступ и граничные размеры.

Тестовые сценарии

• Сохранение и чтение скалярного значения.
• Сохранение и чтение объекта/массива с JSON.parse.
• Удаление одного ключа и проверка его отсутствия.
• Очистка и проверка длины localStorage равной нулю.
• Негативный тест: повреждённый JSON в ключе — приложение не ломается.

Решение на основе диаграммы (поможет выбрать хранилище)

flowchart TD
  A[Нужно хранить данные на клиенте?] --> B{Требуется аутентификация или
хранение секретов?}
  B -- Да --> C[Использовать HttpOnly cookies или серверное хранилище]
  B -- Нет --> D{Нужен объём >5МБ или сложные запросы?}
  D -- Да --> E[Использовать IndexedDB]
  D -- Нет --> F{Данные нужны только в сессии?}
  F -- Да --> G[Использовать sessionStorage]
  F -- Нет --> H[Использовать localStorage]

Примеры, когда localStorage может подвести

• Пользователь очищает данные браузера вручную → потеря данных.
• Ограничение размера приводит к ошибкам записи при попытке сохранить много данных.
• Сторонний XSS‑скрипт получает доступ к данным и похищает информацию.

Краткий глоссарий

• origin — сочетание схемы, хоста и порта (https://example.com:443).
• PII — Personally Identifiable Information, личные данные.
• CSP — Content Security Policy, заголовок для ограничения источников контента.

Итог

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

Примечание

Если нужно реализовать больше примеров (to‑do приложение, кеширование API с автообновлением), я могу добавить готовые шаблоны и тест‑кейсы под ваш сценарий.