개발자 도구 - Application

do yeon kim·2022년 6월 24일

WeCode session

Application 패널의 기능은?

브라우저 저장소 기능

웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사

Local Storage
Session Storage
Cookies (편집됨)

브라우저의 저장소 기능을 담당하며 현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터 등)을 열람할 수 있다.
로그인과 관련한 유저 정보에 대한 부분도 많은 부분을 차지한다.

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

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

쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일
기본적인 웹 구성은 Client-Server로 나뉘게 되며 서버단에는 Database가 존재한다.
보통 정보 저장은 Database에 하게 된다.
그러나 일부 정보를 상태 유지 하기 위해서 Client 단에 저장 할 수 있는 기능을 만들었고,
그것이 web storage / cookie

쿠키와 storage의 차이

데이터 저장 방식 차이
쿠키 - String으로 Value를 다룸.
ex) Cookie:name=minseok
WebStorage - key-value방식으로 데이터를 다룸.
ex) localstorage[‘name’] = minseok
String으로 데이터를 다룬다는 자체가 안정적이지 않다.
한정적인 데이터 저장 공간
기본적인 데이터 저장 공간이 Cookie(4KB), WebStorage(5MB)
쿠키의 경우 너무 한정적인 저장 공간.
쿠키는 모든 HTTP Request가 포함되어 성능에 영향을 줌.
Cookie는 서버와 계속 통신을 하면서 성능에 영향을 준다.
그렇지만 WebStorage는 서버와 통신을 아예 하지 않음!

Local Storage 과 Session Storage 차이

localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
값을 지우려면 직접 지워줘야한다.
세션 스토리지는 localStorage와 쓰는 느낌이 비슷한데 커다란 차이점이 있다.
그것은 바로 소멸 타이밍이다. localStorage는 소멸타이밍이 없다. 즉 직접 지워줘야한다.
그러나 sessionStorage는 세션의 종료시 죽음을 맞이한다.

추가자료

Storage
브라우저의 저장소. Key-Value 페어 형태로 간단한 키와 값을 저장할 수 있다.

Local Storage 과 Session Storage
Local Storage와 Session Storage는 Web Storage로 지속성에 관련해서 두가지로
나눈것이다.

Local Storage
한번 저장하면 명시적으로 지우지 않는 이상 영구적으로 보관되면서
도메인마다 별도로 Local Storage가 생성된다.
로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다.

Session Storage
반대로 지속적으로 보관되지않고, 현재 페이지가 브라우징되고 있는
내에서만 데이터가 유지된다.
즉, 브라우저가 종료되면 Session Storage도 삭제된다.
세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.

Cookie
cookie는 서버와 연동되어 만료 기한이 있는 key-value 저장소이다. cookie는 4kb로 용량이 제한되어 있다.
만료 기한이 있는 키-값 저장소다. 시간 제한이 설정되어 있는(저장 기간 설정 가능) 데이터 저장소이며, 쿠키는 프론트-백엔드 통신과 관련이 있기 때문에 용량이 작을 수 밖에 없다

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

Local Storage
로그인 ID, PASSWORD 자동저장
인터넷이 연결되어 있지 않아도 데이터를 저장 가능
보안이 중요한 영구 데이터 (자동 로그인). 영구적으로 저장되어도 상관 없는 데이터들, 지속적으로 필요한 데이터들을 저장한다.

Session Storage
비로그인 장바구니 기능, 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구
세션 : 보안이 중요한 임시 데이터 (은행 로그인). 민감한 데이터.
잠깐 동안 필요한 정보

Cookie
Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용.
팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기"같은 기능에 필요.
쿠키 : 빠른 처리가 필요한 임시 데이터(광고 팝업)
서비스 직접적이지 않은 데이터

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

localStorage
로컬 스토리지는 HTML5에서 추가된 저장소로 브라우저에 위치한다.

간단한 키와 값을 저장할 수 있고, 로컬 스토리지에 저장된 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.
로컬 스토리지는 window 객체 안에 들어있고, 'Storage'객체를 상속받기 때문에 메소드를 사용할 수 있다.

데이터 저장하기

localStorage.setItem('키', '값');

로컬 스토리지에 데이터를 저장할 때 쓰인다.

key-value 순서대로 인자를 받으며, 값으로는 string, boolean, number, null, undefined 등을 저장할 수 있지만 모두 문자열로 변환된다. key도 문자열로 변환된다.

위 문법처럼 key-value 형식으로 풀어서 여러 개를 저장할 수도 있지만, 객체를 통째로 저장하려면 JSON.stringify()를 사용해 객체를 그대로 문자열화 해주어야 한다.

JSON은 JavaScript Object Notation의 약자로, 브라우저와 서버사이에서 오고가는 데이터의 형식이다.

JSON.stringify( )는 자바스크립트의 값을 JSON 문자열로 변환한다.

JSON.stringify(value, replacer, space)
value(필수): JSON 문자열로 변환할 값이다.(배열, 객체, 또는 숫자, 문자 등이 될 수 있다.)
replacer(선택): 함수 또는 배열이 될 수 있다. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

데이터 조회하기(가져오기)

localStorage.getItem('키');

localStorage.setItem('키', '값');로 저장된 데이터는 key와 위 메소드를 사용해서 가져올 수 있다.
JSON.stringify()를 통해 객체형식으로 저장했다면, 조회 역시 JSON.parse()를 해주어야한다.

쿠키와 세션

쿠키

쿠키는 서버가 사용자의 웹 브라우저에 보낸는 작은 데이터 조각이다.
HTTP통신은 stateless하기 때문에 클라이언트를 확인하기 위해서 쿠키가 필요하다.
쿠키는 클라이언트에 저장된다.
웹브라우저에 해당 서버에 대한 쿠키가 있으면 http통신을 할때 쿠키를 함꼐 보낸다.(HTTP 헤더의 Cookie)

클라이언트가 처음으로 서버에 HTTP통신을 날린다.
서버에서 클라이언트에게 HTTP통신의 응답으로 쿠키를 함꼐 보낸다.
클라이언트는 쿠키 정보를 쿠키디렉토리에 저장해둔다.
이후 다시 같은 서버에 접속 할 때 클라이언트는 저장된 쿠키를 함께 서버에 보낸다.