Local Storage를 활용한 Todo 리스트 만들기

개발자 여러분, 안녕하세요!

 

오늘은 웹 브라우저의 Local Storage를 활용하여 새로고침해도 데이터가 유지되는 Todo 리스트를 만드는 방법을 알아보겠습니다.

먼저, HTML에 Todo 리스트를 위한 구조를 만들어줍니다:

<div id="todo" class="todo">
    <h3>Todo List</h3>
    <input type="text" id="todoInput" placeholder="Add a new todo">
    <ul id="todoList"></ul>
</div>

 

이제 JavaScript로 Todo 리스트의 기능을 구현해봅시다:

 

const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        addTodo(todoInput.value);
        todoInput.value = '';
    }
});

function addTodo(text) {
    const li = document.createElement('li');
    li.innerHTML = `
        <span>${text}</span>
        <button onclick="removeTodo(this)">Delete</button>
    `;
    todoList.appendChild(li);
    saveTodos();
}

function removeTodo(button) {
    button.parentElement.remove();
    saveTodos();
}

function saveTodos() {
    const todos = Array.from(todoList.children).map(li => li.querySelector('span').textContent);
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos')) || [];
    todos.forEach(addTodo);
}

loadTodos();

 

이 코드는 다음과 같이 작동합니다:

1. 사용자가 입력 필드에 Todo 항목을 입력하고 Enter 키를 누르면 addTodo 함수가 실행됩니다.
2. addTodo 함수는 새로운 Todo 항목을 리스트에 추가하고 saveTodos 함수를 호출합니다.
3. saveTodos 함수는 현재 Todo 리스트를 Local Storage에 저장합니다.
4. loadTodos 함수는 페이지 로드 시 Local Storage에서 저장된 Todo 항목들을 불러와 표시합니다.

Local Storage를 사용하면 브라우저를 닫았다가 다시 열어도 Todo 리스트가 유지됩니다.

이는 사용자 경험을 크게 향상시킬 수 있는 중요한 기능입니다.CSS를 통해 Todo 리스트의 스타일을 꾸며줄 수 있습니다 :

 

#todoList {
    list-style-type: none;
    padding: 0;
}

#todoList li {
    background-color: #ecf0f1;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#todoList li button {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

 

이렇게 만든 Todo 리스트는 사용자가 작업을 관리하고 추적하는 데 매우 유용합니다.

Local Storage를 활용하면 서버 없이도 간단한 데이터 지속성을 구현할 수 있어, 작은 규모의 프로젝트나 프로토타입 제작에 특히 유용합니다.

 

다음 포스트에서는 이 Todo 리스트에 우선순위 설정 기능을 추가하는 방법에 대해 알아보겠습니다.