로컬 스토리지를 활용한 매우 간단한 메모장(JS)

🎈 로컬 스토리지(Local Storage)

• 로컬 스토리지는 HTML5에서 추가된 저장소
• 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스
• 사용자가 직접 지우지 않는이상 절대 지워지지 않음
• URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음

📝과제(리팩토링 후) : https://bighuni.github.io/JS-Study/Assignment/1회차

[정리]

• const LOCAL_DATA = "Contents"; => 저장할 데이터의 key 값
• function hiddenAndGreeting(name) {···} => input 태그에 이름 입력 후 input 태그를 감추고, 텍스트가 나타나게 해주는 함수
• function onClick() { localStorage.removeItem(LOCAL_DATA); ··· } => 버튼 클릭 시, 데이터 삭제 이벤트 발생
• function onSubmit(e) {···} => input 태그에 입력 시, lacalStorage의 value 값으로 저장
• function askForContents() {···} => input 태그 보이게 설정, 인사 텍스트와 버튼은 숨김
• function loaded() {···} => 브라우저의 localStorage에 데이터가 있을 때와 없을 때를 구분하여 실행 시켜줄 함수

[회고]

• 로컬 스토리지를 활용하여 정말 간단한 메모장을 만들게 되었는데, 메모지에 내용을 입력 후 Key, Value에 내용이 추가되는 것을 확인할 수 있었고 화면을 새로고침하거나 페이지를 닫고 다시 열었을 때 내용이 그대로 살아있음을 확인하였다. 더 보완해야할 점은 지금은 한 가지 메모 내용만 저장할 수 있어서 다수의 메모 내용을 저장하고, 화면 전환 없이 바로 해당 메모를 삭제할 수 있는 기능, 기록한 시간(Date) 등의 기능 추가 및 사용자 인터페이스를 좀 더 보완해야겠다고 느꼈다.
  

[구현]

[리팩토링]

• 링크 : https://velog.io/@big_huni/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80