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

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

Що таке Local Storage?

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

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

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

Додавання локального сховища

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

Збереження завдань у 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() у нашому сервісі, ми забезпечили збереження даних у менеджері завдань між сесіями. Тепер, коли користувач додає, виконує або видаляє завдання, ці зміни зберігаються у браузері та автоматично відновлюються під час наступного відкриття додатка.

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