LocalStorage в Vue: простой To‑Do с сохранением в браузере

LocalStorage — простой веб‑API для сохранения пар ключ/значение в браузере. В этой инструкции вы создадите простой To‑Do на Vue, который добавляет и удаляет задачи и сохраняет их в LocalStorage. Включены рабочие компоненты, объяснения, когда LocalStorage не подходит, альтернативы и рекомендации по безопасности.

LocalStorage — это встроенный в браузеры API для хранения пар ключ/значение на устройстве пользователя. Он удобен для небольших объёмов данных, которые должны сохраняться между сессиями (после закрытия вкладки или перезапуска браузера).

Цель этого руководства — показать, как интегрировать LocalStorage в простое Vue‑приложение «список задач» (To‑Do). В результате у вас будет рабочее приложение, которое сохраняет задачи в браузере и восстанавливает их при перезагрузке.

Что вы получите

• Рабочий Vue‑To‑Do с добавлением и удалением задач.
• Сохранение задач в LocalStorage в формате JSON.
• Пояснения по структуре компонентов: App.vue и Todo.vue.
• Практические заметки по безопасности, ограничениям и альтернативам.

Требования перед началом

Установите Node.js и npm (или pnpm/yarn). Проверить версии:

node -v
npm -v

Создайте новый проект Vue командой (введите опции по подсказке):

npm create vue

При создании проекта выберите минимальный пресет, если вы делаете простое приложение — для этого урока дополнительные функции не требуются.

Структура приложения

Мы создадим два компонента:

• App.vue — главный компонент, отвечает за ввод новой задачи, хранение массива todos и синхронизацию с LocalStorage.
• src/components/Todo.vue — дочерний компонент для отображения списка и удаления элемента по индексу.

Ниже — готовые примеры кода. Скопируйте их в соответствующие файлы и убедитесь, что имена файлов и путей совпадают.

Компонент списка задач: src/components/Todo.vue

Файл покажет список задач и отправит событие родителю при удалении.

Короткое объяснение:

• defineProps получает массив todos из родителя.
• defineEmits объявляет событие remove-todo.
• При нажатии на кнопку компонент вызывает emit с индексом элемента.

Главный компонент: App.vue (логика)

В App.vue реализуется ввод новой задачи, хранение модели и синхронизация с LocalStorage.

Пояснения по логике:

• STORAGE_KEY делает ключ централизованным и простым для переименования.
• Обёртки try/catch предотвращают падение приложения, если LocalStorage недоступен (режим инкогнито, переполнено хранилище).
• JSON.stringify/parse используются для хранения массива объектов.

Главный компонент: App.vue (шаблон)

Добавьте в App.vue следующий блок template (интерфейс):

После сохранения файлов запустите приложение:

npm run dev

Вы увидите интерфейс похожий на этот:

Теперь вы можете добавлять и удалять задачи. Данные будут сохраняться в LocalStorage и восстанавливаться после перезагрузки страницы.

Важно

LocalStorage доступен только в контексте origin (протокол + домен + порт). Доступ к LocalStorage из cross‑origin iframe или при блокировке сторонних куки может быть ограничен.

Когда LocalStorage не подходит

• Нужны большие объёмы данных (больше ~5–10 МБ в разных браузерах).
• Требуется асинхронный или потоковый доступ к данным (IndexedDB лучше подходит).
• Нужно синхронизировать данные между устройствами или пользователями (требуется сервер/бэкенд).
• Необходимы транзакции, сложные запросы или поиск по индексам (IndexedDB).

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

• IndexedDB — встроенная NoSQL‑база данных в браузере, подходит для больших объёмов и сложных структур.
• Service Worker + Cache API — если нужно кэшировать сетевые запросы и офлайн‑режим, а не произвольные объекты.
• Куки — для малых объёмов и отправки данных на сервер при каждом запросе (не рекомендуется для больших данных).
• Сервер‑сторедж (через API) — хранение пользовательских данных на сервере для синхронизации между устройствами.

Ментальные модели и эвристики

• LocalStorage — похоже на файл настроек пользователя: хранит небольшие настройки и данные, которые «привязаны» к браузеру.
• Если данные должны жить дольше сессии, но не требовать синхронизации — LocalStorage подойдёт.
• Если приложение критично зависит от консистентности и транзакций — думайте в сторону IndexedDB или бэкенда.

Фактбокс: что знать о LocalStorage

• Доступ: window.localStorage (синхронный API).
• Формат: строка (обычно JSON.stringify/parse).
• Ограничения: около 5–10 МБ на origin (зависит от браузера).
• Доступность: работает в большинстве современных браузеров, но может быть недоступен в некоторых приватных режимах.

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

• Приложение запускается командой npm run dev.
• Можно добавить новую задачу и увидеть её в списке.
• При нажатии на «Удалить» задача исчезает из списка.
• После перезагрузки страницы добавленные задачи остаются.
• При отключённом LocalStorage приложение не ломается (есть обработка ошибок).

Чек‑лист по ролям

Разработчик:

• Реализовать add/remove и синхронизацию с LocalStorage.
• Обернуть операции LocalStorage в try/catch.
• Подготовить ключ STORAGE_KEY.

Код-ревьюер:

• Проверить обработку пустых строк при добавлении.
• Убедиться, что JSON.parse не вызывает ошибок для невалидных данных.
• Проверить удобство локализации и текстов кнопок.

Тестировщик:

• Добавить/удалить элементы в разных браузерах.
• Убедиться в поведении в режиме инкогнито.
• Проверить граничные случаи (длинные строки, спецсимволы).

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

• LocalStorage хранит данные в открытом виде на устройстве пользователя — не храните в нём пароли или токены доступа без дополнительного шифрования.
• Любые данные из LocalStorage, используемые в DOM, должны быть корректно экранированы, чтобы избежать XSS‑рисков.
• Для приложений, обрабатывающих персональные данные EU/EEA, рассмотрите требования GDPR: LocalStorage на клиенте не освобождает от обязанностей по защите данных и уведомлению пользователя о целях обработки.

Мини‑методология развёртывания

1. Локально: npm run dev — разработка и быстрые проверки.
2. Сборка: npm run build — статическая сборка для продакшена.
3. Тестирование: ручное и автоматизированное тестирование CRUD и persistence.
4. Мониторинг: логировать ошибки сохранения/загрузки LocalStorage.

Когда LocalStorage «сломается» — примеры

• Пользователь очистил данные браузера: все задачи пропадут.
• Приватный режим в некоторых браузерах может блокировать запись.
• Переполнение квоты: сохранение выдаст исключение.

Рекомендации по улучшению

• Добавьте в структуру задачи поле id (UUID) вместо зависимости от индекса — это упростит синхронизацию и обновления.
• Вынесите работу с LocalStorage в отдельный модуль/сервис для повторного использования и более простого тестирования.
• Подумайте о версии схемы данных и миграции при изменении структуры задач.

Короткое резюме

LocalStorage — быстрый и простой способ сохранить состояние приложения между сессиями. Для небольших приложений и пользовательских настроек это удобный инструмент. В более сложных сценариях, где важны объём, сложные запросы или синхронизация между устройствами, лучше рассмотреть IndexedDB или серверное хранение.

Важно

Не используйте LocalStorage для секретов. Всегда обрабатывайте возможные ошибки при доступе к нему и проверяйте формат загружаемых данных.

Спасибо за чтение! Если хотите, я могу:

• подготовить версию с IndexedDB;
• добавить управление приоритетами и статусами задач;
• дать пример тестов для компонентов.