Тестовое задание на Angular. Использование localStorage.

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

Так как для тестового приложения нет публичного API, которое было бы полноценным backend’ом, будем хранить все данные в localStorage.

Для чтения и сохранения rooms, создадим сервис RoomStorage в папке rooms/storage:

Как видно из примера, сервис имеет 4 метода:

• clear — метод для полной очистки значений из localStorage
• get — метод, который возвращает список сущностей (RoomEntity[]), которые в хранилище хранятся в виде DTO, где соответственно при чтении из хранилища, объекты приводятся к соответствующему типу с помощью функции castRoomEntity
• post — метод, который заменяет все сохраненные сущности на новые. Отметим, что как и в предыдущем методе, мы трансформируем RoomEntity в RoomDto, так как мы не должны хранить состояния в storage. Это некий аналог API, что сохраняя данные на сервере, вы можете отправлять туда только те поля, которые есть у сущности на сервере.
• reset — восстанавливает “фикстуры” для конкретной сущности, то есть заменяет текущие сущности на ROOM_STUB

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

Поэтому создадим модуль room-storage.module.ts и определим в нем данный сервис:

И так как у нас нету данных, для демонстрации возможностей системы, создадим файл room.stub.ts, в котором зададим набор комнат со свойствами:

Как видно, STUB’ами являются сущности DTO. Это как уже и говорилось ранее, сделано специально, эмулируя тем самым работу внешнего сервера с данными.

Аналогично создадим сервисы для работы с Building:

и Person:

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Использование Ngrx State.

Предыдущая статья — Создание логгера.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur