자바스크립트 Local Storage를 이용한 타임라인 구현

15 Sep 2023

javascript

개요

이번 블로그 포스트에서는 자바스크립트 Local Storage를 활용하여 타임라인을 구현하는 방법에 대해 알아보겠습니다. 타임라인은 사용자의 이벤트를 시간순으로 기록하고 저장하는 기능을 제공합니다. Local Storage는 브라우저에 데이터를 저장하는 기능을 제공하므로, 사용자에게 영구적으로 타임라인을 유지할 수 있습니다.

구현 단계

1. HTML 마크업

타임라인을 구현하기 위해 HTML 마크업을 작성해야 합니다. 각 이벤트에 대한 정보를 표시하기 위해 div 요소를 사용하고, 시간에 따라 배열되도록 flexbox 레이아웃을 적용합니다.

<div id="timeline">
  <div class="event">Event 1</div>
  <div class="event">Event 2</div>
  <div class="event">Event 3</div>
  <!-- 이벤트를 동적으로 추가할 수도 있습니다 -->
</div>

2. JavaScript로 Local Storage 사용

자바스크립트를 사용하여 Local Storage에 데이터를 저장하고 불러옵니다. 이를 위해 localStorage 객체의 setItem 메소드와 getItem 메소드를 사용합니다. 타임라인의 이벤트 데이터를 배열로 관리하고, 배열을 JSON 문자열로 변환하여 Local Storage에 저장합니다.

// Local Storage에서 이벤트 데이터 불러오기
const events = JSON.parse(localStorage.getItem('timelineEvents')) || [];

// 타임라인에 이벤트 추가
function addEvent(event) {
  events.push(event);
  localStorage.setItem('timelineEvents', JSON.stringify(events));
}

// 타임라인 초기화
function initTimeline() {
  events.forEach(event => {
    const eventElement = document.createElement('div');
    eventElement.classList.add('event');
    eventElement.textContent = event;
    document.getElementById('timeline').appendChild(eventElement);
  });
}

initTimeline(); // 초기 타임라인 렌더링

3. 타임라인 추가 기능 구현

사용자가 타임라인에 이벤트를 추가할 수 있는 기능을 구현합니다. 사용자 입력을 받아서 이벤트를 추가하고, 이벤트를 Local Storage에 저장한 뒤, 타임라인을 다시 렌더링합니다.

// 이벤트 추가하기
document.getElementById('addEventButton').addEventListener('click', () => {
  const eventInput = document.getElementById('eventInput');
  const newEvent = eventInput.value;

  if (newEvent) {
    addEvent(newEvent);
    eventInput.value = ''; // 입력값 초기화
    initTimeline(); // 타임라인 렌더링
  }
});

마무리

이제 우리는 자바스크립트 Local Storage를 이용하여 타임라인을 구현하는 방법을 알아보았습니다. 사용자는 타임라인에 이벤트를 추가하고, 브라우저를 종료해도 타임라인 데이터가 유지됩니다. 이를 통해 사용자는 개인적인 이벤트 기록을 편리하게 관리할 수 있습니다.

#javascript #localStorage