0

Доброго времени суток!

Прочитал о LocalStorage и решил поработать с ним. Сделал простые задачки. Там все понятно. И вот решил написать todo list, но похоже что зашел в тупик. Все задачи "туду" не буду описывать, опишу только тот этап на котором застрял:

Есть стартовый объект. Если сторадж пуст - выводим title (одно из значений) этого объекта. Если есть записи, то выводим их, без дэфолтного объекта. Записать получилось, а вот с выводом проблема. Я запутался с этим JSON'ом.

Помогите, пожалуйста!

'use strict';

// todos array
const TODOS = [{
  isDone: true,
  id: 1,
  title: 'Wake Up!'
}];

let todos = TODOS;

let serialTodos = localStorage.getItem('todos') ?
  JSON.parse(localStorage.getItem('todos')) : TODOS;

localStorage.setItem('todos', JSON.stringify(serialTodos));


let addTodo = document.getElementById('addTodo'), // btn
  newTodo = document.getElementById('newTodo'), // input
  todosList = document.getElementById('todosList'); // list


// get todos ID
function getMaxId() {
  let maxId = 0;
  for (let todo of todos) {
    if (todo.id >= maxId) {
      maxId = todo.id + 1;
    }
  }
  return maxId;
}


// make div for new todos
let makeNewTodo = text => {
  let todo = document.createElement('div');
  todo.textContent = text;
  todosList.appendChild(todo);

  let clearBtn = document.createElement('button');
  todosList.appendChild(clearBtn);

  clearBtn.addEventListener('click', function() {
    localStorage.removeItem('todos');
    while (todosList.firstChild) {
      todosList.removeChild(todosList.firstChild);
    }
  })
};

// add new todos
addTodo.addEventListener('click', function() {

  let newTodoName = newTodo.value;
  let maxId = getMaxId(todos);

  todos.push({
    isDone: false,
    id: maxId,
    title: newTodoName
  });

  localStorage.setItem('todos', JSON.stringify(serialTodos));
  makeNewTodo(newTodoName);
  newTodo.value = '';
});


serialTodos.forEach(item => {
  makeNewTodo(item);
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>LearnJS</title>
</head>

<body>

  <div>
    <input id="newTodo" type="text">
    <button id="addTodo">add</button>
  </div>

  <div id="todosList">

  </div>

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

</html>

1 ответ 1

1

Например, так:

let makeNewTodo = todoItem => {
    let todo = document.createElement('div');
    // тут вы перепутали textContent и innerText, это разные вещи
    // также у вас в функцию приходит "целый" объект, а не заголовок
    // т.е. нужно дополнительно "доставать" свойство title
    todo.innerText = todoItem.title;
    todosList.appendChild(todo);

    let clearBtn = document.createElement('button');
    clearBtn.innerText = 'x'; // крестик, чтобы кнопка рисовалась, это можно было сделать и через css
    todosList.appendChild(clearBtn);

    clearBtn.addEventListener('click', function () {
        // метод удаления полностью не правильный 
        // т.к. он бедет удалять все элементы сразу, а не конкретный 
        // тут цыклом проходить не нужно
        // а просто удалить нужный элемент
        // и сохранить в localStorage
    })
};
addTodo.addEventListener('click', function () {
    let newTodoName = newTodo.value;
    let maxId = getMaxId(todos);

    let todo = {
        isDone: false,
        id: maxId,
        title: newTodoName
    };
    todos.push(todo);

    // тут вы сохраняли старый массив, который не содержит новых элементов
    // поэтому после перегрузки ничего не отображалось
    localStorage.setItem('todos', JSON.stringify(todos));
    // тут я поменял, чтобы передавался в функцию makeNewTodo целый объект
    // но можно было бы оставить и имя, но тогда нужно пометянь все места где функция makeNewTodo использовалась
    // т.к. в оригинальном коде вы в одном месте передаете объект, а в другом строку 
    makeNewTodo(todo);
    newTodo.value = '';
});
4
  • Здравствуйте! Спасибо что откликнулись) В Вашем варианте выводит undefined, и только после релода страницы отображает валидный результат. И еще после релода не сохраняет новые значения в сторадж. Не пойму почему так. Вроде все сделал как Вы написали 29 фев 2020 в 22:30
  • 1
    @TarasYurovskiy обновил 29 фев 2020 в 23:39
  • Спасибо!) Но теперь после перезагрузки не добавляет, а перезаписывает сторадж. 1 мар 2020 в 16:25
  • 1
    Пофиксил! в функции слушателя нужно обращаться не к todos, а к serialTodos, т.к. в этой переменной хранятся новые значения. 2 мар 2020 в 22:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.