Question

我正在从本地存储中检索数据并将其插入DOM。问题是每次我调用该函数时，它都会在每次本地存储数据时循环并将数据复制到DOM。我想创建一种算法来防止这种情况。无论我们遍历本地存储多少次，我都只希望在DOM中仅显示一次数据。

我尝试了很多事情。最近，我试图制作一条IF语句，该语句循环遍历本地存储并获取当前的循环对象ID，并将其与DOM的ID进行比较。如果不相似，则将其放置到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);
 }
}

我希望仅将数据发送到具有唯一ID的DOM。但是每次循环具有相同ID时，我都会得到相同数据的重复

如何通过本地存储将数据插入DOM而不每次都复制数据

0 个答案: