Тестовое задание на Angular. Создание и управление localStorage’ем
Теперь создадим сервис, который позволит нам сохранять данные в LocalStorage.
Данный шаг, тоже не является обязательным. Вы можете смело использовать хранилище (localStorage) напрямую. Все что будет описано ниже, необходимо для решения критичных моментов, но это не обязательно делать в тестовом задании.
Так как использовать Web API напрямую не рекомендуется, добавим специальный сервис, который позволит работать с хранилищем безопасно.
Создадим папку core/storage/common/interfaces. Создадим интерфейс для работы с хранилищем и добавим абстрактный класс.
AsyncStorage — представляет интерфейс по работе с хранилищем. Если обычное Web хранилище, это key-value хранилище где есть много ключей и значений, то мы делаем так, чтобы все знания(state) были сохранены только в одном месте с соответствующим ключем. Это позволит нам не размазывать логику по приложению, а также контролировать чтение и запись.
AbstractStorage — абстрактная реализация для LocalStorage и SessionStorage, где их различия только в том, какое веб хранилище используется для чтения и записи.
Так как в некоторых устройствах может не быть доступ к хранилищу, добавим утилиту на доступность:
И если хранилище не доступно, добавим фейковое хранилище:
Также отметим, что в AbstractStorage, при записи в хранилище стоит try/catch — это необходимо для того, чтобы когда у клиента кончилась память приложение не падало с ошибкой.
Добавим реализации для localStorage и sessionStorage:
Данные сервисы мы делаем providerIn: ‘root’ специально, для того, чтобы наши импорты сервисов не раздувались, да и формально это всего-лишь обертка над стандартным API.
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Установка redux и создание root store.
Предыдущая статья — Создание базовых интерфейсов.
UPD: Немного вариативности
Иногда есть потребность в нативных хранилищах. И тогда можно немного подправить интерфейсы и получить следующее:
Тогда реализация для:
LocalStorage
SessionStorage
В реализации приведены хранилища для Sync и Async случаев при работе с хранилищами.
Ссылки
Вернуться к оглавлению — Введение.
Следующая статья — Установка redux и создание root store.
Предыдущая статья — Создание модулей и компонентов.
Все исходники на github/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
