간단한 To Do 웹페이지
- 첫 방문이라면 이름을 입력받고 Local Storage 에 저장 후 "Hello 이름" 띄우기
- 첫 방문이 아니라면 바로 "Hello 이름" 띄우기
- 첫 방문인지 아닌지는 Local Storage에 이름이 저장되어 있는지 확인하면 알 수 있음
- Date 클래스의 getHours(), getMinutes(), getSeconds() 메서드 => 현재 시각 표시
- setInterval 함수 => 현재 시각을 1초 간격으로 업데이트
- String 클래스의 padStart() 메서드 => 시, 분, 초가 한 자리 숫자일 때도 앞에 0을 붙여 두 자리로 보이게끔 만듦
- To Do를 입력 받고 화면에 띄우기
- 각 To Do 리스트 마다 삭제 버튼 추가
- To Do 를 Local Storage에 저장하여 사용
- Local Storage는 String 형태로만 저장 가능함
∴ 배열에 저장한 후 JSON의 stringify() 메서드로 String 타입으로 바꿔서 저장 - 저장된 To Do 리스트를 불러올 때는 Local Storage에 저장된 String을 JSON의 parse() 메서드를 활용해 다시 배열 바꾼 후 각 요소를 printTodo 함수의 인자로 전달
- Local Storage에 할 일과 id값으로 이루어진 object를 String 형태로 저장 (id는 Date.now() 사용)
- filter() 메서드 => 삭제 버튼이 있는 li 노드의 id와 일치하는 id를 가진 Local Storage의 할 일 Object 삭제
- Local Storage는 String 형태로만 저장 가능함