최근 작성중이던 글 불러오기 기능 구현하기.

이 글의 구현은 상당히 간단하다.

 

바로 웹의 로컬 스토리지 기능을 이용하는데,

 

로컬 스토리지에 대한 개념이 부족하다면 여기를 참조하시기 바랍니다.

 

 

---

기본적인 HTML 파일에 textArea 하나 넣는 것으로 샘플을 구현하겠습니다.

 

테스트를 위해서 body에는 달랑 이거 하나 있습니다. 

 

VsCode를 통해 LiveServer을 띄워보면 웹 페이지에 달랑 하나 있고, 

이제 저 값 안에 텍스트를 입력하고 그 값을 일정 주기로 저장하거나 하면 끝이다.

300x250

---

JavaScript 작성

 

일단 해당 textArea를 query Selector로 변수에 저장하고, 값을 가져온다.

 

그러면 해당 DOM에 접근이 가능하고

 

다음 단계는 textArea안에 값을 저장할 방법인데,

나는 키보드 입력 이벤트를 받아 입력마다 값을 LocalStorage에 저장하기로 했다.

 

영역에 키보드 이벤트가 발생했을 때, 값을 생성하고 있다면 값을 덮어쓴다.

 

크롬에서 개발자 도구를 열고 Application탭을 확인해보자.

 

값이 잘 저장된 모습이고 

테스트용으로 찍은 콘솔에도 값이 잘 찍혔다.

 

그리고 윈도우가 다시 로드될 때, 해당 영역의 값을 다시 불러올 건지 Alert창이 뜬다.

확인을 누르면 불러오고 아니라면 해당 LocalStorage를 삭제한다.

 

이런 알림창이 뜬다.

 

확인을 누르면 

 

 

위 GIF 이미지처럼 잘 동작함을 알 수 있다.

 

index.html

0.00MB

작성한 html파일도 함께 업로드합니다.

입맛에 맞게 커스텀 해보세요!