개발자도구- Application

주원·2022년 8월 19일

Application panel

Application 패널의 기능
->>브라우저 저장소

Storage : 브라우저의 저장소

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

Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.

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

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

로칼 스토리지

세션 스토리지

쿠키

원래 로컬 스토리지와 세션 스토리지가 나오기 전에는 쿠키밖에 없었음.
위 스토리지들과 비슷한 기능을 하는 것이라고 보면 되지만, 가장 큰 차이는,
웹스토리지는 로컬에만 정보를 저장, 쿠키는 서버와 로컬에 정보를 저장한다는 것.
쿠키 장점 : 대부분의 브라우저가 지원한다는 점.
쿠키 단점 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담이 가며 용량 매우 작다.(약 4kb) 암호화가 존재하지 않아 사용자 정보가 도 난될 위험이 있다.
4-2) 쿠키 단점1 : 매 HTTP요청마다 포함되어 api호출로 서버에 부담.

4-3) 쿠키 단점2 : 쿠키의 용량이 작음 (약 4Kb)

4-4) 쿠키 단점3 : 암호화 존재 x -> 사용자 정보 도난 위험

서비스 직접적이지 않은 데이터
오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

:exclamation:️
비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.
Local Storage 에 특정 데이터를 저장하고 가져오는 방법