자바스크립트 Local Storage를 활용한 투두 리스트 개발

15 Sep 2023

javascript

투두 리스트는 많은 사람들이 일상적으로 사용하는 앱 중 하나입니다. 여러분도 투두 리스트 앱을 개발해보고 싶지 않으신가요? 이번 포스트에서는 자바스크립트의 Local Storage를 활용하여 실제로 동작하는 투두 리스트를 개발하는 방법에 대해 알아보겠습니다.

Local Storage란?

Local Storage는 브라우저에 데이터를 저장하는 웹 스토리지입니다. 이 데이터는 브라우저 세션을 종료하고 다시 시작해도 유지됩니다. 이를 이용하여 투두 리스트 데이터를 저장하고 불러올 수 있습니다.

HTML 구조

먼저, 투두 리스트를 보여주기 위한 HTML 구조를 만들어야 합니다. 아래는 기본적인 HTML 구조입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>투두 리스트</title>
</head>
<body>
    <h1>투두 리스트</h1>
    <input type="text" id="todo-input">
    <button id="add-button">추가</button>

    <ul id="todo-list">
        <!-- 여기에 투두 아이템이 동적으로 추가됩니다. -->
    </ul>

    <script src="app.js"></script>
</body>
</html>

JavaScript로 기능 구현하기

이제 JavaScript를 사용하여 투두 리스트의 기능을 구현해보겠습니다.

// Local Storage에 저장된 투두 리스트 데이터를 불러와 화면에 표시합니다.
function loadTodoList() {
    const todoList = JSON.parse(localStorage.getItem('todos')) || [];

    const todoListContainer = document.querySelector('#todo-list');
    todoListContainer.innerHTML = '';

    todoList.forEach((todo) => {
        const todoItem = document.createElement('li');
        todoItem.textContent = todo;

        todoListContainer.appendChild(todoItem);
    });
}

// 투두 아이템을 Local Storage에 저장하고 화면에 추가합니다.
function addTodo() {
    const todoInput = document.querySelector('#todo-input');
    const newTodo = todoInput.value.trim();

    if (newTodo !== '') {
        const todoList = JSON.parse(localStorage.getItem('todos')) || [];
        todoList.push(newTodo);

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

        loadTodoList();

        todoInput.value = '';
    }
}

// 초기화 함수
function init() {
    const addButton = document.querySelector('#add-button');

    addButton.addEventListener('click', addTodo);
    loadTodoList();
}

init();

위의 JavaScript 코드는 다음과 같은 기능을 가지고 있습니다.

loadTodoList(): Local Storage에 저장된 투두 리스트 데이터를 불러와 화면에 표시합니다.
addTodo(): 투두 아이템을 Local Storage에 저장하고 화면에 추가합니다.
init(): 초기화 함수로, 버튼 클릭 이벤트 리스너를 등록하고 투두 리스트를 불러옵니다.

마치며

이렇게 자바스크립트의 Local Storage를 활용하여 투두 리스트를 개발해보았습니다. 이제 여러분은 사용자의 투두 리스트를 브라우저에 안전하게 저장하고 불러올 수 있는 기능을 가지고 있는 앱을 개발할 수 있습니다.

#javascript #localstorage