Ted's Codding study

로컬 스토리지를 활용한 Todo 예제 정답입니다.절대 제가 작성한 코드가 무조건 적인 정답은 아니며, 여러분의 생각과 다르다면 그것이 정답일 것입니다~~HTML 코드 Add Task CSS 코드body { background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); width: 500px;}..

해당 페이지는 연습용으로 질문만 있고 정답은 다음 글에서 공개합니다HTML 코드와 CSS 코드를 복붙한 후 main.js를 생성해서 아래 설명대로 한번 작성해보세요!HTML 코드 Add Task CSS 코드body { background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); width: ..

1. localStorage.getItem(key)의 기본 사용법localStorage.getItem 메소드는 지정된 키에 해당하는 값을 로컬 스토리지에서 검색하여 반환키에 해당하는 데이터가 없으면 null을 반환해당 메소드는 데이터를 조회할 때 사용되며, 매우 간단하고 직관적인 API를 제공'key'는 데이터에 접근하기 위해 사용되는 식별자해당 식별자를 통해 저장된 값을 검색 가능사용 예제// localStorage.setItem('username', '테드');// localStorage.setItem('key', 'value'); // 앞선 예제에서 넣었던 setItem 목록let value = localStorage.getItem('key');console.log(value);let usernam..

1. 로컬 스토리지의 정의웹 브라우저가 제공하는 저장 공간사용자의 컴퓨터에 영구적으로 데이터를 저장 가능HTML5 웹 스토리지 사양의 일부로 도입, 쿠키의 한계를 극복하고 더 큰 저장 용량과 더 나은 보안을 제공로컬 스토리지를 통해 저장된 데이터는 서버에 자동으로 전송되지 않으며, 웹 페이지가 로컬 데이터를 직접 제어 가능 2. 로컬 스토리지의 용도1) 사용자 경험 개선로컬 스토리지는 사용자의 기본 설정, 테마 선택, 언어 설정 등을 저장하여 , 다음 방문 때 웹사이트가 이 설정들을 기억하도록 지정2) 상태 유지웹 어플리케이션에서 사용자의 세션 정보나 로그인 상태를 관리할 수 있어, 브라우저를 종료 후 재접속했을 때도 이전 상태를 유지 가능3) 오프라인 데이터 저장네트워크 연결이 끊겨도 접근 가능한 정보..