HTML Event
- 유저가 웹에서 HTML element에 가하는 각종 액션에 의해 발생되는 것
- event 발생은 HTML 요소이지만 이에 대한 구체적 로직은 JavaScript로 구현.
[HTML Event 예제]
- onchange : 요소의 value가 변경되었을 때
- onclick : 요소에 커서를 두고 클릭했을 때
- onmouseover : 요소로 커서를 이동시켰을 때
- onmouseout : 요소에 있던 커서가 요소밖으로 이동했을 때
- onload : 브라우저가 해당 element 콘텐츠 로딩을 모두 마쳤을 때(img, script, css 등)
[Event 등록 방법]
1.
<button onclick = "this.innerHTML = Data()">The time is?</button>
onclick에 어떤 로직을 구현할 것인지 작성.
2. Event Listener
- addEventListener() method
- JavaScript로 특정 HTML element에 이벤트 핸들링 로직을 등록할 때 사용
- event 종류는 다양하며 각 event 마다 속성값이 다 다르다.
브라우저 기능(웹 스토리지)
웹 스토리지 : 브라우저에 저장되는 키 - 값 쌍
1. 로컬 스토리지 : 브라우저 종료 시에도 유지되는 데이터
2. 세션 스토리지 : 브라우저 종료 시에는 삭제되나, 새로 고침 시에도 유지되는 데이터 (같은 탭 내에서만). 보통 자바스크립트 코드는 새로고침 시에 다시 받아와지므로 코드 상의 변수들은 새로고침 시 삭제되었다가 다시 생성된다는 점에서, 같은 탭에서 새로고침을 했을 때도 변하지 않길 원한다면 세션 스토리지 활용하기.
쿠키 : 특정 시간동안 데이터가 삭제되지 않고 이후 삭제되도록 설정하고 싶을 때 사용.[쿠키와 다른 점]
- 요청 헤더에 포함되지 않음. 보다 많은 정보 저장 가능
- 클라이언트에서만 조정 가능
- 해당 URL에서만 접근 가능
웹 스토리지를 보려면
개발자도구 -> Application 탭 -> storage -> Local storage/session storage
[Local storage]
이름 저장
Application 탭에 들어가서 로컬 스토리지 클릭하면 name이라는 키를 가진 'LEE' 밸류를 가진 키 - 값 쌍이 저장되어 있음. 
이름 변경.
name 값이 변경되었음.
로컬 스토리지에서 값을 읽어오려면 'getItem' 메서드 사용.
잘 출력됨.
점 표기법이나 대괄호 표기법 모두 사용 가능.
로컬 스토리지에서 해당 키 - 값 쌍을 삭제하고 싶다면, 'removeItem' 메서드 사용.
삭제 완료.
존재 x.
Application의 로컬 스토리지에서 보더라도 아무런 키 - 값 쌍이 없음.
[Local storage]
키 - 값 쌍 확인.
로컬 스토리지도 다시 만들어주기.
그럼 현재 로컬 스토리지, 세션 스토리지 모두 키 - 값 쌍이 들어 있음.
차이점은, 로컬 스토리지는 다른 탭에서도 유지되지만, 세션 스토리지는 탭별로 각각을 유지한다. 다른 탭에서는 유지되지 x.
다른 탭을 열어 개발자도구를 확인하면 로컬 스토리지는 키 - 값 쌍이 그대로 존재.
세션 스토리지에 들어가면 키 - 값 쌍이 존재하지 않음.
로컬 스토리지는 브라우저를 기준으로 해서 브라우저 내에 다른 탭이 켜져 있더라도 유지된다. 세션 스토리지는 브라우저 내의 탭 하나를 기준으로 공간을 잡기 때문에 다른 탭에서는 공유되지 않는다!