Как получить элементы из localStorage и отобразить в моем пользовательском интерфейсе?

Question

Это то, что я пробовал.Это работает только с небольшой проблемой.Каждый раз, когда я добавляю новый элемент в localStorage, он умножает элементы при его отображении до тех пор, пока я не обновлю страницу

const displayStorage = () => {
  let values = [],
    keys = Object.keys(localStorage),
    i = keys.length;
  while (i--) {
    if (keys[i] === 'theme') continue;
    values.push(JSON.parse(localStorage.getItem(keys[i])));
  }
  values.reverse();
  return values.forEach(obj => showNotes(obj));
};

например, скажем, у меня хранится 123, и я хочу добавить 4. Он возвращает 1231234 вместо простого1234

Это функция, которая обрабатывает отображение пользовательского интерфейса

const showNotes = ({ id, post, date }) => {
  const noteSection = document.createElement('div');
  noteSection.classList.add('notes-container');
  const notes = document.createElement('article');
  notes.classList.add('single-note');
  notes.textContent = post.substring(0, 100);

  const viewMore = document.createElement('a');
  viewMore.classList.add('view-more');
  viewMore.textContent = '...';
  viewMore.setAttribute('title', 'View more');
  viewMore.addEventListener('click', e => {
    e.preventDefault();
    if (notes.textContent.length <= 110) {
      notes.textContent = post;
      notes.appendChild(viewMore);
      viewMore.setAttribute('title', 'View less');
    } else {
      notes.textContent = post.substring(0, 100);
      notes.appendChild(viewMore);
      viewMore.setAttribute('title', 'View more');
    }
  });

  const noteActions = document.createElement('span');
  noteActions.classList.add('note-actions');
  const deleteLink = document.createElement('a');
  deleteLink.textContent = 'Delete';
  deleteLink.setAttribute('data-id', `${id}`);
  deleteLink.addEventListener('click', deleteNote);

  const notesDate = document.createElement('aside');
  notesDate.classList.add('note-date');
  notesDate.textContent = date;
  noteActions.appendChild(deleteLink);
  notes.appendChild(viewMore);
  notes.appendChild(noteActions);
  noteSection.appendChild(notesDate);
  noteSection.appendChild(notes);
  document.querySelector('.notes').appendChild(noteSection);
};

Это функция для сохранения

notesForm.addEventListener('submit', e => {
  e.preventDefault();
  const save = (sid, spost, sdate) => {
    const obj = { id: sid, post: spost, date: sdate };
    localStorage.setItem(`${sid}`, JSON.stringify(obj));
  };
  save(generateId(), post.value, dateFormat());
  displayStorage();
});