Artem3677
@Artem3677
Учусь

Как сохранить лишки в локелсторэдж?

Есть такая задача по js, связанная с localStorage: сделайте чеклист, представляющий собой список дел. Дела можно добавлять, изменять, удалять и помечать сделанными. При этом дан index.html:

<div>
    <ul id="checklist"></ul>
    <input id="add">
  </div>

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

let inp = document.querySelector('#add');
let ul = document.querySelector('#checklist');

let arr = [];

inp.addEventListener('blur', function() {
  let li = document.createElement('li');
  li.innerHTML = '<span data-elem="text">' + this.value + '</span><input data-elem="checkbox" type="checkbox"><a data-elem="remove" href="">X</a>';
  this.value = '';
  ul.appendChild(li);
  
  arr.push(li);
  console.log(arr);

  let elems = document.querySelector('li');
  localStorage.setItem('data', JSON.stringify(elems));

  li.addEventListener('click', function(event) {
    if (event.target.dataset.elem) {
      switch (event.target.dataset.elem) {
        case 'text':
          let span = event.target;
          
          let input = document.createElement('input');
          input.value = event.target.innerHTML;
          span.innerHTML = '';
          span.appendChild(input);
            
          input.addEventListener('blur', function() {
            span.innerHTML = this.value;
          });
        break;
        case 'checkbox':
        li.classList.toggle('done');
        break;
        case 'remove':
          li.parentElement.removeChild(li);
          event.preventDefault();
        break;
      }
    }
  });
})  

let time = localStorage.getItem('time');
  
if (!time) {
  let now = Date.now();
  localStorage.setItem('time', now);
  let json = localStorage.getItem('data');
  let data = JSON.parse(json);
  ul.append(data);
  
  //localStorage.setItem('data', JSON.stringify(data));
  
}

if (time) {
  let now = Date.now();
  localStorage.setItem('time', now);
  let json = localStorage.getItem('data');
  let data = JSON.parse(json);
  ul.append(data);
      
  //localStorage.setItem('data', JSON.stringify(data));  
}

Вопрос как правильно сохранить лишки в localStorage чтоб потом извлечь их при перезагрузке страницы на своё место?
  • Вопрос задан
  • 142 просмотра
Решения вопроса 1
imko
@imko
Senior Scratch Developer
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы