✔️ Application Panel

Application Panel 의 기능

브라우저의 저장소. 브라우저에서 저장할 많은 저장소들과 캐시, 스토리지 들이 많이 있다.
로그인과 관련해서 유저정보에 대한 부분에도 많은 부분을 차지하기 때문에 꼭 알아두어야 할 패널이다.

Cookie

만료 기한이 있는 키-값 저장소. 시간제한이 설정되어 있는 (저장 기간 설정가능) 데이터 저장소이며,
쿠키는 프론트-백엔드 통신과 관련이 있기 때문에 용량이 작을 수 밖에 없다.
Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

Cookie 의 종류

• Seesion Cookies - 만료일을 포함하지 않는다. 대신 브라우저나 탭이 열려있는 동안에만 저장하고 닫히면 영구적으로 삭제된다. -> 주로 보안이 강한 은행 유저들의 자격증명을 저장하는데 사용한다.

• Persistent Cookies - 만료일을 포함한다. 만료일까지 유저의 디스크에 저장되고 지나면 삭제된다.

Cookie 보단 Local Storage

• HTML5가 나온 이후, Cookies의 많은 사용 방법들은 Local Storage로 대체 -> Cookies 보다 더 많은 장점이 있기 때문인데, 가장 중요한 차이점은 Local Storage는 Cookies 와는 달리 모든 HTTP요청에서 데이터를 주고받을 필요가 없어 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있습니다.

Local Storage

로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.

Session Storage

세션스토리지는 로컬스토리지와 다르게 세션이 종료되면 (웹 브라우저 종료시) 클라이언트에 대한 정보를 삭제한다. Key-Value 페어의 객체 형태로 데이터 저장. (예, 뒤로가기버튼 )

Local Storage, Session Storage, Cookie 사용예시

• 어떤 데이터를 어디에 저장하면 좋을까?

• Local Storage :  지속적으로 필요한 데이터(data persistant)(ex. 자동 로그인 여부)
                              UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

• Session Storage:  보안이 중요한 임시데이터 ( 은행 로그인 ) , specific 한 유저 정보

• Cookie :  서비스 직접적이지 않은 데이터
                 빠른 처리가 필요한 임시데이터 ( 광고 팝업 )

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

데이터 저장

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

데이터 호출

• localStorage.getItem("key")
• sessionStorage.getItem("key")
• sessionStorage.getItem("key")

기타 메소드

• 외에도 removeItem, clear 등등의 공통 메소드 존재