Как сохранить лишки в локелсторэдж?
Есть такая задача по js, связанная с localStorage: сделайте чеклист, представляющий собой список дел. Дела можно добавлять, изменять, удалять и помечать сделанными. При этом дан index.html:
<div> <ul id="checklist"></ul> <input id="add"> </div> |
<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)); } |
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 чтоб потом извлечь их при перезагрузке страницы на своё место?
Дополнительно:
в лишках
Тьфу...
В кишках данные не хранятся, а отображаются.
Правильно добавлять
Правильно извлекать
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для сохранения данных в локальном хранилище браузера, таком как localStorage, вы можете использовать JavaScript. localStorage позволяет хранить данные в паре ключ-значение и сохранять их даже после перезагрузки страницы.
Вот пример использования localStorage для сохранения данных в браузере:
// Сохранение данных в localStorage localStorage.setItem('key', 'value'); // Получение данных из localStorage var data = localStorage.getItem('key'); // Удаление данных из localStorage localStorage.removeItem('key');
Если вы хотите сохранить объект или массив, вам нужно сначала преобразовать его в формат JSON с помощью методов JSON.stringify и JSON.parse:
// Сохранение объекта в localStorage var obj = { key: 'value' }; localStorage.setItem('obj', JSON.stringify(obj)); // Получение объекта из localStorage var storedObj = JSON.parse(localStorage.getItem('obj'));
Обратите внимание, что localStorage имеет ограничение на количество данных, которые можно хранить, и не рекомендуется использовать его для хранения больших объемов информации.
Таким образом, вы можете использовать localStorage для сохранения данных в браузере и обращаться к ним в любое время, пока пользователь не очистит кэш или не отключит cookies.