TIL #5 application Panel

1. application Panel의 기능

• 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람할 수 있는 패널 이다.

2. 3가지 차이점

세가지 모두 (키, 값) 데이터 저장소
Local Storage와 Session Storage는 Web Storage로 Web Storage는 데이터를 웹 클라이언트(브라우저)에 저장하기만 하고 쿠키는 서버로 매번 데이터가 전송이 된다.

로컬 스토리지와 세션 스토리지는에 저장된 데이터는 새로고침을 해도 값을 유지시킬수 있으며

로컬스토리지: 데이터는 사용자가 삭제하기 전까지 값이 유지가 돼서 데이터의 영구성이 보장이 됩니다.

세션스토리지: 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거가 되어서

로컬 스토리지에는 지속적으로 필요한 데이터(자동 로그인 등) 저장하고,

는 세션 스토리지에는 잠깐 동안 필요한 정보(일회성 로그인 정보라든가)를 저장합니다.

쿠키: 저장된 데이터가 클라이언트에만 존재하여 서버로 전송이 이루어지지 않는 Web Storage와 다르게 쿠키는 매번 서버로 전송이 되고 쿠키는 만료 기한이 있는 키-값 저장소 입니다.

3. 사용예시

• Local Storage = 영구적으로 저장이 되어도 상관이 없는 보안이 중요한 영구 데이터(자동 로그인)
• Session Storage = 민감하고 보안이 중요한 임시 데이터 (은행 로그인, 비로그인 장바구니)
• 쿠키 = 빠른 처리가 필요한 임시데이터 (이벤트나 광고 팝업)

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

• localStorage.setItem("key", "value")

• localStorage.getItem("key")