-
[리팩토링] 로컬 스토리지프론트엔드 2022. 7. 29. 23:14
🎈 로컬 스토리지(Local Storage)
- 로컬 스토리지는 HTML5에서 추가된 저장소
- 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스
- 사용자가 직접 지우지 않는이상 절대 지워지지 않음
- URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음
📝과제 : https://bighuni.github.io/JavaScript-Study/Assignment/1회차
[회고]
- 1회차 과제인 로컬 스토리지를 활용하여 간단한 메모장을 만들었었는데, 한 가지 메모 내용만 저장하고, 화면 전환 없이 바로 해당 메모를 삭제할 수 있는 기능 등을 보완하기 위해 html, css & js 전반적인 코드를 다시 뜯어내고
getItem
과setItem
, JSON의 stringify로 값이나 객체를 문자열로 변환하고,liMaker()
함수를 호출하여 li 엘리먼트에 텍스트 값을 넣어 Item 목록인 ul을 추가할 것 - 기입할 내용을 저장할 수 있도록
저장하기
버튼을 누르면 메모 내용이 아래 리스트처럼 나열될 수 있도록 의도하기 - 초기화 버튼을 누르면 기존에 기입한 메모들 삭제 기능 추가하기
[UI]
'프론트엔드' 카테고리의 다른 글
자바스크립트 클래스 정리 (0) 2022.07.29 JS를 사용한 간단한 캐러셀 슬라이더 (0) 2022.07.29 로컬 스토리지를 활용한 매우 간단한 메모장(JS) (0) 2022.07.29 크리스마스 with happy Coding (0) 2022.07.29 CSS(Grid), 스프린트 회고 (0) 2022.07.29