로컬 스토리지를 활용한 간단한 메모 앱 만들기

안녕하세요, 오늘은 JavaScript를 이용해 로컬 스토리지를 활용한 간단한 메모 앱을 만드는 방법을 소개하려고 합니다. 이 프로젝트는 JavaScript, HTML, CSS의 기본적인 지식을 활용하여 실제로 동작하는 웹 애플리케이션을 만드는 재미를 느낄 수 있는 좋은 예제입니다. 지금부터 코드를 하나씩 살펴보면서 어떻게 구현되는지 알아보겠습니다.

1. 로컬 스토리지와 메모 저장 기능

로컬 스토리지는 브라우저에 데이터를 저장할 수 있는 기능입니다. 이 프로젝트에서는 사용자가 메모를 작성하고 저장 버튼을 누르면, 해당 메모가 로컬 스토리지에 저장되도록 구현되었습니다. 아래는 주요 JavaScript 코드입니다:

saveBtn.onclick = function() {
  if (text.value == '') {
    alert('Body text must not be empty!');
  } else {
    pst.innerHTML += `<div id="saver">` + `<h3 id="tt">` + title.value + `</h3>` + `<button>` + text.value + `</button>` + `</div>`;
    window.localStorage.setItem('str', JSON.stringify(pst.innerHTML));
    Pst();
  }
};

function Pst() {
  pst.innerHTML = JSON.parse(window.localStorage.getItem('str'));
}

saveBtn 버튼을 클릭하면 제목과 본문 내용을 확인한 뒤, 비어 있지 않다면 로컬 스토리지에 데이터를 저장합니다. 저장된 데이터는 Pst() 함수를 통해 다시 화면에 표시됩니다.

2. 메모 초기화 기능

사용자가 저장된 메모를 모두 삭제하고 싶을 때를 위해 초기화 버튼도 추가되었습니다. 초기화 버튼을 클릭하면 로컬 스토리지와 화면의 내용을 모두 삭제합니다:

clr.onclick = function() {
  pst.innerHTML = '';
  window.localStorage.setItem('str', JSON.stringify(pst.innerHTML));
};

3. 사용자 인터페이스 디자인

CSS를 활용하여 메모 앱의 디자인을 간단히 꾸며보았습니다. 메모 영역, 버튼, 텍스트 입력 필드 등이 구분되도록 스타일을 적용하였습니다:

#display {
  border: 4px solid;
}
#saver {
  border: 2px solid;
}
#clr {
  margin: 5%;
}
#editor {
  box-shadow: 0 0 3px red;
}
#editor input {
  width: 80%;
  box-shadow: 0 2px;
  color: #fff;
  -webkit-text-stroke: 1px #111;
}
#editor textarea {
  width: 80%;
  display: block;
  margin: 5% 2px 2px 9%;
  box-shadow: 0 0 3px;
  text-align: center;
}
#editor button, #display button {
  background: conic-gradient(navy, #44f);
  border-radius: 10px;
  border: 4px solid #0f07f0;
  width: 80%;
  font-size: 24px;
  color: white;
  -webkit-text-stroke: 2px red;
  font-weight: 800;
  text-transform: uppercase;
}

4. HTML 구조

HTML 파일의 구조는 간단합니다. 메모를 작성할 수 있는 입력 필드, 저장 버튼, 초기화 버튼, 그리고 저장된 메모를 표시할 공간으로 구성되어 있습니다:

<section id="editor">
  <div>

    <textarea id="body" rows="9" cols="40"></textarea>
    <button type="smt" id="save">Store</button>
  </div>
</section>
<div style="border: 2px solid"></div>
<section id="display">
  <bdo id="pst"></bdo>
  <button id="clr">CLEAR ALL</button>
</section>

마무리

이 간단한 메모 앱 프로젝트를 통해 로컬 스토리지의 기본적인 사용법을 익히고, HTML/CSS/JavaScript를 활용한 웹 애플리케이션 개발을 경험해볼 수 있습니다. 직접 코드를 작성하고 실행해보면서 자신만의 기능을 추가해보는 것도 좋은 학습 방법입니다. 이제 여러분도 로컬 스토리지를 활용한 프로젝트에 도전해 보세요!

#JavaScript #LocalStorage #웹개발