17. Momentum 만들기 6 - todolist 만들기2

2단계 todolist 에 저장한 값을 로컬스토리지에 저장하고 출력

• 출처: https://youtu.be/JEbOaI_0phc [노마드 코더 Nomad Coders]

1. 사용자의 할일을 입력폼에 등록시 로컬스토리지에 저장
2. 저장한 할일을 출력

키워드1. JSON.stringify, JSON.parse

• Object형태를 String형태로 상호 변환시킴
• 자세한 내용은 https://tcss.tistory.com/entry/16-JSON?category=865698 참고

키워드2. forEach 배열반복

• Looping over an array 배열 반복
• 자세한 내용은 https://tcss.tistory.com/entry/Array-%EC%8B%AC%ED%99%94%ED%95%99%EC%8A%B5?category=865698 참고

전체코드

todo.js

'use strict';

const toDoForm = document.querySelector('.js-toDoForm');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('.js-toDoList');

const TODO_ITEMS = 'toDos';
const toDos = [];

function saveToDoItem(item) {
    const stringItem = JSON.stringify(item);
    localStorage.setItem(TODO_ITEMS, stringItem);
}
function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;

    displayToDoList(currentValue);
    toDoInput.value = '';
}

function displayToDoList(item) {
    const li = document.createElement('li');
    const delBtn = document.createElement('button');
    delBtn.innerText = '❌';

    const span = document.createElement('span');
    const newId = toDos.length + 1;

    span.innerText = item;
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId; //li에 id값을 설정한 이유는 추후 삭제를 위한것임
    toDoList.appendChild(li);

    const toDoObj = {
        text: item,
        id: newId //추후 삭제를 위해 로컬스토리지에 id값을 부여
    };

    toDos.push(toDoObj);
    saveToDoItem(toDos);
}

function loadToDoList() {
    const loadToDoItems = localStorage.getItem(TODO_ITEMS);
    if (loadToDoItems !== null) {
        const parseItems = JSON.parse(loadToDoItems);

        parseItems.forEach(function (item) {
            displayToDoList(item.text);
        });
    }
}

function init() {
    loadToDoList();
    toDoForm.addEventListener('submit', handleSubmit);
}

init();