Как сохранить изображения на локальном хранилище, если нет соединения, и отправить на сервер, как только соединение будет в Angular 9

Question

Я создал компонент с Angular 9, который загружает или делает фотографию, изменяет изображение, а затем, если соединение установлено как истинное, изображения будут отправляться на сервер, иначе они должны быть сохранены в локальном хранилище и отправлены на сервер как как только связь будет. Я попал в то место, где я проверяю соединение, и когда появляется поддельный лоток для сохранения изображения в локальном хранилище. Это моя ссылка на изображение после редактирования:

imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.base64
  }

Это функция добавления:

  onAdd() {
    if (navigator.onLine) {
      console.log('send');
    } else {
      localStorage.setItem("imgData", this.croppedImage);
      setInterval(() => {
      }, 3000)
    }
  }

Каждый раз, когда я нажимаю кнопку Добавить, изображение, которое уже сохранено в локальном хранилище, соответствует новому. Как я могу сохранить много изображений? Что я делаю не так? Или есть какие-то идеи о том, как контролировать этот момент.