230310 TIL

💫오늘의 깨달음

1.addEventListener vs onclick

1. 브라우저 호환성
   • addEventListener는 IE 6,7,8 에서는 호환되지 않는다.
   • addEventListener 호환성 확인
2. 버블링, 캡쳐링 설정 가능 여부
   • addEventListener는 3번 째 파라미터로 버블링, 캡쳐링 동작 여부를 설정할 수 있다.
   • 3번째 파라미터 type을 true로 설정하면 버블링, false로 설정하면 캡쳐링 (default는 false)
3. 이벤트 중첩

• onclick 등과 같은 메서드의 경우 하나의 이벤트만 등록이 가능하다.
• 반대로 addEventListener의 경우 여러 이벤트를 등록 가능하다.

참고사이트

2. localStorage와 sessionStorage

웹 스토리지 객체 localStorage와 sessionStorage를 사용하면 브라우저에 키-값 쌍을 저장할 수 있다.

• 키와 값은 반드시 문자열이어야 한다.
• 제한 용량은 5MB 이상 브라우저에 따라 상이함
• 파기되지 않음
• 오리진(도메인, 포트, 프로토콜)에 묶여 있음
• 객체를 저장할 때 JSON.stringify(), 불러올 때 JSON.parse()

localStorage	sessionStorage
오리진이 같은 탭, 창 전체에서 공유됨	오리진이 같은 브라우저 탭, iframe에서 공유됨
브라우저를 껏다 켜도 남아 있음	페이지를 새로고침 해도 남아 있음 탭 이나 브라우저 종료하면 사라짐