Есть такая задача по 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 чтоб потом извлечь их при перезагрузке страницы на своё место?
