Как можно добавить в localStorage Html block, чтобы при обновлении блок оставался?

Question

 

   const sendData = async(url, data) => {
  const response  = await fetch(url, {
    method : 'POST',
    body : data,
  })
  return await response.json();
  
  
};

const sendCart = () => {

  const cartForm = document.querySelector('.addendum__form-add');


  cartForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const bookName = document.querySelector('.addendum__names-add');

    const formData = new FormData(cartForm);


    sendData('https://apiinterns.osora.ru/', formData)
    .then((data) => {
       setToLocalStorage(data, bookName.value);
       cartForm.reset();

    });

  })
};
const setToLocalStorage = (data, bookName) => {
  if (!localStorage.getItem('books')){
    localStorage.setItem('books', JSON.stringify({}));
  }
  const booksObject = JSON.parse(localStorage.getItem('books'));
  booksObject[bookName] = decodeURIComponent(escape(data.text));
  localStorage.setItem('books', JSON.stringify(booksObject));
}


sendCart();

//


const formWrite = document.querySelector('.addendum__form-write');
const list = document.querySelector('.list');

formWrite.addEventListener('submit',(e) => {
  e.preventDefault();
  const inputWrite = document.querySelector('.addendum__names-write');
  const areaWrite = document.querySelector('.addendum__text-write')
  
  writeLocalStorage(inputWrite.value , areaWrite.value);
  let newBook = document.createElement('div');
  let newBookTitle = document.createElement('h5');
  let bookButtons = document.createElement('div');
  let bookBottonEditing = document.createElement('button');
  let bookRead = document.createElement('button');
  let bookToRead = document.createElement('button');
  let bookDelete = document.createElement('button');

  newBook.classList.add('new-book');
  newBookTitle.classList.add('list__title');
  bookButtons.classList.add('list__btn');
  bookBottonEditing.classList.add('list__btn-item');
  bookRead.classList.add('list__btn-item');
  bookToRead.classList.add('list__btn-item');
  bookDelete.classList.add('list__btn-item');

  newBookTitle.innerHTML = inputWrite.value;
  bookBottonEditing.innerHTML = 'ред.';
  bookRead.innerHTML = 'Прочитанна';
  bookToRead.innerHTML = 'Читать';
  bookDelete.innerHTML = 'x';

  list.appendChild(newBook);
  newBook.appendChild(newBookTitle);
  newBook.appendChild(bookButtons);
  bookButtons.appendChild(bookBottonEditing);
  bookButtons.appendChild(bookRead);
  bookButtons.appendChild(bookToRead);
  bookButtons.appendChild(bookDelete);

})


const writeLocalStorage = (title , text) => {
  if (!localStorage.getItem('books')){
    localStorage.setItem('books', JSON.stringify({}));
  }
  const booksObject = JSON.parse(localStorage.getItem('books'));
  booksObject[title] = decodeURIComponent(escape(text));
  localStorage.setItem('books',JSON.stringify(booksObject));
}

Answer 1

Такого метода writeLocalStorage нет, в коде js между комментариями посмотрите, как писать и доставать значения из localStorage. Здесь это работать не будет, доступ к localStorage в песочнице ограничен.

const formWrite = document.querySelector('.addendum__form-write');
const list = document.querySelector('.list');

formWrite.addEventListener('submit', (e) => {
  e.preventDefault();
  const inputWrite = document.querySelector('.addendum__names-write');
  const areaWrite = document.querySelector('.addendum__text-write')
  
  //Как-то так это должно
  window.localStorage.setItem(inputWrite.value, areaWrite.value);
  let c = window.localStorage.getItem(inputWrite.value);
  console.log(c)
  //выглядеть
  
  let newBook = document.createElement('div');
  let newBookTitle = document.createElement('h5');
  let bookButtons = document.createElement('div');
  let bookBottonEditing = document.createElement('button');
  let bookRead = document.createElement('button');
  let bookToRead = document.createElement('button');
  let bookDelete = document.createElement('button');

  newBook.classList.add('new-book');
  newBookTitle.classList.add('list__title');
  bookButtons.classList.add('list__btn');
  bookBottonEditing.classList.add('list__btn-item');
  bookRead.classList.add('list__btn-item');
  bookToRead.classList.add('list__btn-item');
  bookDelete.classList.add('list__btn-item');

  newBookTitle.innerHTML = inputWrite.value;
  bookBottonEditing.innerHTML = 'ред.';
  bookRead.innerHTML = 'Прочитанна';
  bookToRead.innerHTML = 'Читать';
  bookDelete.innerHTML = 'x';

  list.appendChild(newBook);
  newBook.appendChild(newBookTitle);
  newBook.appendChild(bookButtons);
  bookButtons.appendChild(bookBottonEditing);
  bookButtons.appendChild(bookRead);
  bookButtons.appendChild(bookToRead);
  bookButtons.appendChild(bookDelete);

})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style/style.css">
  <title>Document</title>
</head>

<body>
  <div class="library">
    <div class="book">
      <div class="favorite">
        <h3>Любимые книги</h3>
      </div>
      <div class="list">
        <h3>Список книг</h3>
      </div>
      <div class="addendum">
        <h3>Добавить книгу</h3>
        <div class="addendum__block">
          <div class="addendum__add">
            <input type="radio" name="book" data-tab="#tab_1" checked class="addendum__add-input  addendum__tab active">
            <label>Загрузить книгу</label>
          </div>
          <div class="addendum__write">
            <input type="radio" name="book" data-tab="#tab_2" class="addendum__write-input addendum__tab">
            <label>Написать самому</label>
          </div>
          <!-- form ADD -->
          <form class="addendum__form-add tabs__content active_content" id="tab_1">
            <input type="text" class="addendum__names-add" placeholder="Название..." name='login'>
            <input type="file" accept=".txt" id="#form__add" name="file" class="addendim__file-add">
            <button class="addendom-btn">Добавить</button>
          </form>
          <!-- / ADD -->
          <!-- form WRITE -->
          <form class="addendum__form-write tabs__content" id="tab_2">
            <input class="addendum__names-write" name="login" type="text" placeholder="Название...">
            <textarea class="addendum__text-write" name="file" cols="55" rows="5" placeholder="Текст..."></textarea>
            <button class="addendom-btn">Добавить</button>
          </form>
          <!-- / WRITE -->
        </div>
      </div>
    </div>
    <div class="reading">
      <div class="text">

      </div>
    </div>
  </div>
  <script src="script/script.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как можно добавить в localStorage Html block, чтобы при обновлении блок оставался?

Ответы (1 шт):