[WEB] 개발자도구 - Application

Application 패널의 기능은?

• 브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.
• 프로그레시브 웹 앱 디버그
• 스토리지, DB 및 캐시 검사 및 관리
• 쿠키 검사 및 삭제
• 리소스 검사

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

• Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.
• Cookie : 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

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

• Local Storage
  • 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  • UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
• Session Storage
  • 잠깐 동안 필요한 정보
  • ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
• Cookie
  • 서비스에 직접적이지 않은 데이터
  • 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

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

• 데이터 저장
  - localStorage.setItem("key", "value")
  - sessionStorage.setItem("key", "value")
  - setcookie("key", "value", "지속시간 (초단위)")
  
• 데이터 호출
  - localStorage.getItem("key")
  - sessionStorage.getItem("key")
  - document.cookie
  
• 기타 메소드
  - 외에도 removeItem, clear 등등의 공통 메소드 존재