На цьому етапі наш застосунок керує завданнями лише в оперативній пам'яті. Це означає, що кожного разу при оновленні сторінки весь список завдань втрачається.

Щоб вирішити цю проблему та зберігати завдання між сесіями користувача, використаємо Local Storage — вбудовану функцію браузера, яка дозволяє зберігати пари ключ-значення безпосередньо у браузері користувача.

Що таке Local Storage?

Дані, збережені у Local Storage, не зникають після закриття сторінки або браузера — вони залишаються доступними навіть після повного перезапуску браузера.

LocalStorage зберігає дані лише у вигляді рядків, тому при роботі з об'єктами або масивами необхідно конвертувати їх за допомогою JSON.stringify() перед збереженням і JSON.parse() при отриманні.

Наведено основні методи для взаємодії з Local Storage:

Додавання Local Storage

Щоб завдання зберігалися навіть після перезавантаження сторінки, необхідно реалізувати збереження даних за допомогою Local Storage браузера. Це означає, що потрібно навчити наш TaskService зберігати завдання у local storage та завантажувати їх під час запуску застосунку.

Збереження завдань у Local Storage

Спочатку потрібен метод, який буде брати наш внутрішній масив завдань і зберігати його у Local Storage браузера.

Ось як це можна зробити:

private saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

Цей метод перетворює масив tasks у JSON-рядок за допомогою JSON.stringify. Потім він зберігає цей рядок у localStorage під ключем tasks.

Щоразу, коли завдання додається, видаляється або оновлюється, цей метод викликається для збереження даних.

Завантаження завдань з Local Storage

Далі буде реалізовано метод, який завантажує список завдань з Local Storage під час ініціалізації сервісу.

private loadTasks(): Task[] {
  const data = localStorage.getItem('tasks');
  return data ? JSON.parse(data) : [];
}

Цей метод намагається отримати значення з localStorage, використовуючи той самий ключ tasks.

Якщо дані існують, він перетворює JSON-рядок назад у масив TypeScript. Якщо у сховищі нічого немає, повертається порожній масив для початку роботи з чистого аркуша.

Завантаження завдань під час ініціалізації сервісу

Потрібно завантажити наявні завдання одразу після створення сервісу. Для цього використовується конструктор сервісу:

constructor() {
  this.tasks = this.loadTasks();
}

Це гарантує, що масив завдань одразу заповнюється будь-якими раніше збереженими даними при запуску застосунку.

Фінальна версія TaskService

Залишилося лише переконатися, що наш список завдань зберігається у Local Storage щоразу, коли відбуваються зміни. Для цього потрібно викликати метод saveTasks наприкінці методів addTask, deleteTask та toggleTask, щоб Local Storage залишався синхронізованим із нашим списком tasks.

Ось як виглядає повний TaskService з функціональністю локального зберігання:

Реалізувавши методи saveTasks() та loadTasks() у нашому сервісі, ми забезпечили збереження даних менеджера завдань між сесіями. Тепер, коли користувач додає, виконує або видаляє завдання, ці зміни зберігаються у браузері та автоматично відновлюються під час наступного відкриття застосунку.

Це надає нашому застосунку значно професійнішого та надійнішого користувацького досвіду.