개발자 도구 Application

개발자 도구란? : 브라우저에서 제공하는 하나의 도구. 웹사이트를 즉각적으로 수정하고 문제 발생시 원인을 파악하여 빠른 속도로 대응할 수 있도록 도와준다.

1. Application 패널의 기능은?

• 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.

2. Local Storage, Session Storage, Cookie 의 차이점은?

• 공통사항 : 스토리지는 브라우저의 저장소, 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입된 개념이다. 간단한 키와 값을 저장 (key-value Storage) 할 수 있다. 그 전에는 쿠키라는 저장소를 사용했다.

• Local Storage : 사용자가 지우지 않는 이상 데이터의 영구성을 가진다

• Session Storage : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 데이터의 영구성을 가지지 않는다

• Cookie : 쿠키는 클라이언트에 대한 정보를 이용자의 PC의 하드디스크에 보관하기 위해서 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이다

3. Local Storage, Session Storage, Cookie 사용 예시

• Local Storage : 자동 로그인 기능, 사용자 설정 저장, 영구적으로 저장되도 상관 없는 데이터

• Session Storage : 일회성 로그인 ( 은행 로그인.. 등)

• Cookie : 빠른 처리가 필요한 임시데이터 ( 광고 팝업창.. )

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

• localStorage.setItem("key", "value"); // 저장

• sessionStorage.setItem("key", "value");

• localStorage.getItem("key"); // 호출

• sessionStorage.getItem("key")

• document.cookie