개발자 도구 - Application Panel

Application 패널의 기능

• 브라우저 저장소의 기능을 담당한다.
• 프로그레시브 웹 앱 (PWA) 디버그
• 스토리지, DB 및 캐시 관리
• 쿠키 관리
• 리소스 관리

Local Storage, Session Storage, Cookie 차이점은?

• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 영구적으로 저장됨
• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫는 순간 제거된다. Key, Value 의 페어로 저장됨
• Cookie : 4kb 이하의 텍스트만 저장 가능하다. 일정 기간 동안 데이터를 저장할 수 있다.

Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

• Local Storage : ID저장, 최근 검색 기록 유지
• Session Storage : 1회성 로그인 정보
• Cookie : ( )동안 팝업창 보지 않기

Local Storage 에 특정 데이터를 저장하고 가져오는 방법

• 데이터 저장

	- localStorage.setItem("key", "value")
	- sessionStorage.setItem("key", "value")
	- setcookie("key", "value", "지속시간 (초단위)")

• 데이터 호출

    - localStorage.getItem("key")
    - sessionStorage.getItem("key")
    - document.cookie