Как вставить данные в DOM через локальное хранилище, не дублируя данные каждый раз

Question

Я извлекаю данные из локального хранилища и вставляю в него DOM. Проблема в том, что он каждый раз зацикливает данные локального хранилища и дублирует данные в DOM, когда я каждый раз вызываю функцию. Я хочу создать алгоритм, который предотвращает это. Я хочу, чтобы данные отображались в DOM только один раз, независимо от того, сколько раз мы зацикливались на локальном хранилище.

Я перепробовал множество вещей. Недавно я попытался сделать оператор IF, который зацикливается на локальном хранилище и выбирает текущий зацикленный идентификатор объекта и сравнивает его с идентификатором DOM. Если это не похоже, поместите его в DOM. Но это не работает.

export const displayIncome = (income) => {
 const data = JSON.parse(localStorage.getItem('income'));
 let length = data.length;
 for(let i = 0; i < length; i++) {

  const query = document.querySelectorAll('.item');
  const queryToArray = Array.from(query);

  if(queryToArray.forEach(el => 
  parseInt(el.getAttribute("href").split('#')[1]) !== income[i].id)) {
   const markup = `
       <div class="item" href="#${income[i].id}">
        <div class="item__time">
          ${income[i].date}
        </div>
        <div class="item__description">
          ${income[i].description}
        </div>
        <div class="item__value">
          ${income[i].value}
          <div class="item__delete">
            <div class="item__delete--btn"><i class="far fa-trash-alt"></i>
            </div>
          </div>
        </div>
`;
    document.querySelector('.container').insertAdjacentHTML('afterend', markup);
 }
}

Я ожидаю получить данные только в DOM с уникальным идентификатором. Но я получаю дубликаты одних и тех же данных каждый раз, когда зацикливаюсь с одинаковым идентификатором