Как сохранить данные о том, что было удалено, и после перезагрузки страницы удалённые ранее элементы должны отсутствовать на странице?

Question

[Lia Sav]

Есть контейнер с изображениями

<div class="container">
      <div class="image">
        <img src="img/1.jpg" alt="1" /> <button>&times;</button>
      </div>
      <div class="image">
        <img src="img/2.jpg" alt="2" /><button>&times;</button>
      </div>
      <div class="image">
        <img src="img/3.jpg" alt="3" /><button>&times;</button>
      </div>
      <div class="image">
        <img src="img/4.jpg" alt="4" /><button>&times;</button>
      </div>
    </div>

При клике на × элемент удаляется

function remove() {
  let item = this.closest(".image");
  item.remove();
}
Array.from(document.querySelectorAll("button")).forEach((b) =>
  b.addEventListener("click", remove)
);

Как сохранить данные о том, что было удалено, и после перезагрузки страницы удалённые ранее элементы должны отсутствовать на странице?

Answer 1

[Александр]

<div class="container">
  <div class="image" id="image_1">
    <img src="img/1.jpg" alt="1" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_2">
    <img src="img/2.jpg" alt="2" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_3">
    <img src="img/3.jpg" alt="3" />
    <button class="delete-button">&times;</button>
  </div>
  <div class="image" id="image_4">
    <img src="img/4.jpg" alt="4" />
    <button class="delete-button">&times;</button>
  </div>
</div>

const buttons = document.quertSelectorAll('.delete-button');

const removeBlock = (target, selector) => {
	const element = target.closest(selector);

	if (element !== null) {
		if (element.id !== '') {
			const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];
			deletedElements.push(element.id);
			localStorage.setItem('deleted-elements', JSON.stringify(deletedElements));
		}

		element.remove();
	}
}

for (const button of buttons) {
	button.addEventListener('click', event => {
		event.preventDefault();
		removeBlock(event.currentTarget, '.image');
	});
}

window.addEventListener('DOMContentLoaded', () => {
	const deletedElements = JSON.parse(localStorage.getItem('deleted-elements')) || [];

	for (const deletedElement of deletedElements) {
		const element = document.quertSelector(`#${deletedElement}`);
		if (element !== null) {
			element.remove();
		}
	}
});

Comments

[Lia Sav]

Спасибо большое)

Answer 2

[Алексей Ярков]

1. Хранить на бэкенде и запрашивать оттуда оставшиеся элементы
   
2. Хранить в localStorage в браузере