자바스크립트 Local Storage를 이용한 주소록 애플리케이션 구현

15 Sep 2023

javascript

local-storage

이번 프로젝트에서는 자바스크립트의 Local Storage를 활용하여 주소록 애플리케이션을 구현해보겠습니다. Local Storage는 웹 브라우저에 데이터를 임시로 저장할 수 있는 기능을 제공하는데, 이를 활용하여 주소록 데이터를 유지하고 저장할 수 있습니다.

요구사항

주소록 애플리케이션은 다음과 같은 기능을 가져야 합니다:

새로운 연락처 추가
연락처 수정
연락처 삭제
연락처 목록 표시

애플리케이션 구조

이 애플리케이션은 다음과 같이 세 가지 주요 구성 요소로 이루어져 있습니다:

HTML: 사용자 인터페이스를 위한 HTML 요소들을 구성합니다.
자바스크립트: 주소록 데이터를 관리하고 액션을 처리하는 로직을 구현합니다.
CSS: 인터페이스 디자인을 스타일링하는데 사용됩니다.

코드 예시

// 주소록 데이터
let contacts = [];

// LocalStorage에서 데이터 불러오기
function loadContacts() {
  const storedContacts = localStorage.getItem('contacts');
  if (storedContacts) {
    contacts = JSON.parse(storedContacts);
  }
}

// LocalStorage에 데이터 저장하기
function saveContacts() {
  localStorage.setItem('contacts', JSON.stringify(contacts));
}

// 연락처 추가
function addContact(name, phone) {
  const newContact = { name, phone };
  contacts.push(newContact);
  saveContacts();
}

// 연락처 수정
function editContact(index, updatedContact) {
  contacts[index] = updatedContact;
  saveContacts();
}

// 연락처 삭제
function deleteContact(index) {
  contacts.splice(index, 1);
  saveContacts();
}

// 연락처 목록 표시
function displayContacts() {
  const contactsList = document.querySelector('#contacts-list');
  contactsList.innerHTML = '';

  contacts.forEach((contact, index) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <span>${contact.name}</span>
      <span>${contact.phone}</span>
      <button onclick="edit(${index})">수정</button>
      <button onclick="delete(${index})">삭제</button>
    `;
    contactsList.appendChild(listItem);
  });
}

// 초기화
function init() {
  loadContacts();
  displayContacts();
}

init();

위의 코드 예시에서는 주소록 데이터를 배열로 관리하며, localStorage를 이용하여 데이터를 브라우저에 저장합니다. addContact, editContact, deleteContact 함수를 통해 연락처를 추가, 수정, 삭제할 수 있고, displayContacts 함수를 통해 연락처 목록을 화면에 출력합니다.

마무리

이렇게 자바스크립트의 Local Storage를 활용하여 간단한 주소록 애플리케이션을 구현해보았습니다. Local Storage를 사용하면 웹 브라우저에 임시 데이터를 저장할 수 있어 사용자가 페이지를 다시 로드하거나 브라우저를 종료해도 데이터가 유지될 수 있습니다. 이를 활용하여 다양한 프로젝트를 구현할 수 있습니다.

#javascript #localstorage #주소록 #애플리케이션 #프로젝트