본문 바로가기
320x100
728x90

로컬스토리지2

최근 작성중이던 글 불러오기 기능 구현하기. 이 글의 구현은 상당히 간단하다. 바로 웹의 로컬 스토리지 기능을 이용하는데, 로컬 스토리지에 대한 개념이 부족하다면 여기를 참조하시기 바랍니다. 기본적인 HTML 파일에 textArea 하나 넣는 것으로 샘플을 구현하겠습니다. 테스트를 위해서 body에는 달랑 이거 하나 있습니다. VsCode를 통해 LiveServer을 띄워보면 웹 페이지에 달랑 하나 있고, 이제 저 값 안에 텍스트를 입력하고 그 값을 일정 주기로 저장하거나 하면 끝이다. JavaScript 작성 일단 해당 textArea를 query Selector로 변수에 저장하고, 값을 가져온다. 그러면 해당 DOM에 접근이 가능하고 다음 단계는 textArea안에 값을 저장할 방법인데, 나는 키보드 입력 이벤트를 받아 입력마다 값을 Local.. 2022. 2. 1.
로컬스토리지를 이용해서 웹사이트 다크모드 구현하기 오늘은 국비지원 교육과정 중 2차 프로젝트에 포함된 내용이며 실제 제가 구현한 내용을 바탕으로 로컬 스토리지와 세션 스토리지, 쿠키에 대해 알아보겠습니다. 일단 제가 다크모드를 구현하기 위해 했던 설계입니다. 위 그림의 이해가 어려울 수 있어, 추가 설명을 하자면 1. 클라이언트가 서버에게 최초 문서를 요청할 때는, 값이 null임. 이를 이용해 null이거나 false면 데이터 타입이 boolean인 flag의 값을 사용. 2. 사용자의 클릭 이벤트에 따라서 flag값이 true , false를 반환함. 이를 클릭 시마다 localStorage.setItem('flag', 'true') , localStorage.setItem('flag', 'false')를 flag라는 키워드에 Value를 저장 3... 2020. 7. 2.
300x250
320x100