Как правильно получить данные из базы данных с помощью JavaScript

Оффтоп javascript
1

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

let namesList = document.querySelector("#namesList");
let resetBtn = document.querySelector("#resetButton");
let savedItems = document.querySelector("#savedItems");
let dataArray = JSON.parse(localStorage.getItem("savedData")) || []

fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(posts => {
  posts.forEach(item => {
    let title = document.createElement("h2");
    title.innerText = item.title;
    namesList.appendChild(title);

    let saveButton = document.createElement("button");
    saveButton.innerText = "Сохранить";
    title.appendChild(saveButton);
    saveButton.addEventListener("click", function() {
      if (dataArray.includes(item.id)) {
        alert("Элемент уже сохранен");
        return;
      } else {
        let listItem = document.createElement("li");
        listItem.innerText = item.title;
        savedItems.appendChild(listItem);
        dataArray.push(item.id);
        localStorage.setItem("savedData", JSON.stringify(dataArray));
      }
    });
  });
});

resetBtn.addEventListener("click", function() {
  localStorage.clear();
  savedItems.innerHTML = null;
  savedItems.innerHTML = "Сохраненные: ";
  dataArray = [];
});

Буду признателен за любые советы по улучшению!

2

Еще одна проблема - ты сохраняешь только id постов в localStorage. При восстановлении придется снова запрашивать сервер или сохранять целые объекты. Если страница перезагрузится, восстановить названия из одних id не выйдет. Сохраняй сразу {id: item.id, title: item.title} вместо просто id. И обязательно добавь .catch() к fetch - без него любая сетевая ошибка убьет весь скрипт.

3

Вижу пару проблем в коде - после перезагрузки сохраненные элементы не показываются, хотя в localStorage лежат. И стоит добавить обработку ошибок для fetch. Что именно хочешь сделать? Обычный список избранного или что-то сложнее?

4

Код работает, но есть пара моментов. Вместо savedItems.innerHTML = null лучше писать "". Главная проблема - при перезагрузке страницы сохраненные данные не показываются. Добавь функцию, которая при запуске достанет данные из localStorage и покажет их. И оберни fetch в try-catch или добавь .catch() - без этого сетевые ошибки не обрабатываются.