@Vladislav6

Как записать значение из input?

Здравствуйте дамы и господа.

Пытаюсь создать что-то вроде To-Do List, функционал весь есть, который задумал: добавить задачу, удалить какую-то задачу и очистить весь список.

Не хватает одного, сохранения при обновлении страницы. то бишь localStorage. Не могу понять, как это сделать, пробовал непосредственно закинуть input.value - записывает одно значение, а при добавление других символов из input`a просто их дописывает к уже имеющемуся в loacaStorage. Пробовал через пустой массив - тоже ничего не получилось. Код ниже приведу, а так же закину в песочницу, там будет полный код.

Помогите решить задачу с localStorage.
Вот ссыль на песочницу, там весь код: https://jsfiddle.net/baddesinger5/c9atxpoq/2/
Адаптива нет если что, не пугайтесь и разверните побольше окно с отображением.

//create task
const addBtn = document.querySelector('.add');
let input = document.querySelector("#input[type='text']");
let getUl = document.querySelector('.list');


let liMaker = addBtn.addEventListener('click', function() {
    let createLi = document.createElement('li');
    createLi.classList.add('row');
    
    let createSpan = document.createElement('span');

    let createLink = document.createElement('a');
    createLink.innerHTML = '✖';

    getUl.appendChild(createLi);
    createLi.append(input.value);
    createLi.append(createSpan);
    createSpan.append(createLink);
    
    // //delete one task
    function removeItem() {
        let eachItem = this;
            createLink.addEventListener('click', function(e) {
                e.preventDefault();
                createLi.remove(eachItem);
                createLink.remove(eachItem);
    })
    } removeItem();
    
    // delete all
    const removeAll = document.querySelector('.remove-all');
    removeAll.addEventListener('click', function() {
        createLi.remove();
        createSpan.remove();
        localStorage.clear();
    })
})


Заранее спасибо кто откликнется.
  • Вопрос задан
  • 574 просмотра
Решения вопроса 1
Fi1osof
@Fi1osof
JS fullstack developer
Мой вариант:
Вот подправленный вариант: https://jsfiddle.net/Fi1osof/Lf2at5go/1/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@StasEx
localStorage записывает в себя только строки(String). Так что нужно каждый раз преобразовывать типы данных.
В случае с массивами можно поступить так...

1. Создание массива в начале приложения:
localStorage.setItem('store', ([]).toString() ); // создаем пустой массив и тут же преобразуем его в String


2. Чтение из store:
const store = Array.from(localStorage.getItem('store')) // получаем Store из localStorage и преобразуем его в массив


3. Запись в store:
// та же техника
const store = Array.from(localStorage.getItem('store')) // получаем Store
store.push({todoName:  'habr help', isComplete: false}) // заполняем новыми данными
localStorage.setItem('store', (store).toString() ); // выполняем сохранение в localStorage


4. Удаление из store:
// можно сделать через фильтр
const store = Array.from(localStorage.getItem('store')) // получаем Store
store.filter(item => item.todoName !== 'habr help');
localStorage.setItem('store', (store).toString() ); // выполняем сохранение в localStorage


5. Удаление всего store / чистка:
localStorage.removeItem('store'); // - удаляет только сам <b>store</b> из localStorage
localStorage.clear(); // - удаляет все элементы из localStorage (опасно, если приложение построено с localStorage )


like.podpiska.repost = true;
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы