개발자도구

브라우저에서 제공하는 도구로써 웹사이트 디버깅을 빠르게 할 수 있도록 도와준다.

• 운영체제의 종류마다 개발자 도구를 여는 방법이 다르다.
• 브라우저마다 개발자 도구가 있다.
• 개발자도구에는 여러 패널들이 존재한다.
  (elements, console, source, network, application...)

elements

로딩 된 웹페이지의 요소와 스타일 검사 및 편집이 가능하다.

• DOM과 Css를 편집해서 볼 수 있지만 수정 요소가 저장되지는 않는다.

console

웹페이지에서 발생하는 메세지를 확인할 수 있다.

• 에러를 확인하거나 console.log() 메서드의 실행 결과를 확인하는데 쓰인다.
• 자바스크립트 코드를 입력해 실행해보거나 페이지를 제어할 수 있다.

source

로딩 된 페이지의 자바스크림트 코드를 디버깅 할 수 있다.

• 웹페이지에 포함된 모든 리소스를 열어볼 수 있다.

network

로딩 된 웹페이지에 관련된 모든 네트워크 요청 정보와 성능을 확인 할 수 있다.

• 웹페이지에서 통신하고 있는 모든 정보가 표시되는 곳이며 http 네트워크 통신, 페이지 로딩 성능 테스트, 이미지 영상 등의 소스 확인이 가능하다.

application

WebStorage, Session, Cookies를 확인하고 관리할 수 있다.

웹스토리지

쿠키와 비슷하게 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능이다.

세션스토리지

window.sessionStorage 객체

• 브라우저를 닫을 시 데이터가 삭제된다.
• 동일한 탭이여도 다른 도메인이면, 다른 세션 스토리지가 생성된다.
  (탭/윈도우 단위로 세션 스토리지가 생성된다.)
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
• 윈도우 복제로 생성된 경우, 혹은 스크립트로 새 창을 연 경우 세션 스토리지가 복제되어 생성된다.
• 지속적으로 필요한 정보를 저장하기에 좋다. (ex. 자동 로그인 등)

로컬스토리지

window.localStorage 객체

• 사용자가 직접 데이터를 지우지 않는 이상, 데이터를 유지할 수 있다
• 도메인별로 생성되고, 다른 도메인의 로컬스토리지에 접근 불가하다
• 서로다른 탭이여도 동일한 도메인이면 공유한다.
• 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 입력 폼 저장, 일회성 로그인 등)

데이터 저장하기

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

저장된 데이터 가져오기

localStorge.getItem('key')
sessionStorage.getItem('key')
document.cookie

세션스토리지, 로컬스토리지 차이

• 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
• 로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용