개발자 도구

개발자 도구란 브라우저가 제공하는 tool로, 각각의 브라우저가 기본적으로 제공하며 별도의 설치가 필요없다. element, console, network, application 등 여러 panel이 있다.
이 중 application panel에서는 storage(브라우저 저장소)를 확인할 수 있다. Local storage, session storage 그리고 cookie가 있다. storage에 저장된 데이터는 key-value 형태의 객체이다.

Application 패널의 기능은?

위에서 잠깐 언급했던 것과 동일하게 Application 패널은 브라우저 저장소의 기능을 담당한다. 현재 로딩된 웹 페이지에서 사용된 리소스(이미지,스크립트,데이터)를 열람할 수 있는 패널이다. 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.

web storage

HTML5부터 등장한 기능이다. 데이터를 서버에 전송하지 않고 클라이언트 웹브라우저에 저장한다. local storage와 session storage로 나뉜다.

local storage

한번 저장하면 명시적으로 지우지 않는 이상 영구적으로 보관되면서 도메인마다 별도로 Local Storage가 생성된다. storage 3가지 중 허용 용량이 가장 크다(10mb).
-> 지속적으로 필요한 정보 저장

session storage

현재 페이지가 브라우징되고 있는 내에서만 데이터가 유지된다. 즉, 브라우저가 종료되면 Session Storage도 삭제된다. 동일한 탭이어도 다른 도메인이라면 별개의 session storage가 생성된다.
->잠시 필요한 정보 저장

Cookie

cookie는 서버와 연동되어 만료 기한이 있는 key-value 저장소이다. cookie는 4kb로 용량이 제한되어 있다.

Local Storage, Session Storage, Cookie 사용 예시

Local Storage

로그인 ID, PASSWORD 자동저장 인터넷이 연결되어 있지 않아도 데이터를 저장 가능

Session Storage

비로그인 장바구니 기능, 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구

Cookie

Cookie는 사이트에서 로그인 상태를 유지하고 사이트 환경설정을 기억하는 용도로 사용.
팝업창에서 "오늘 하루 동안 보지 않기", "일주일 동안 보지 않기"같은 기능에 필요.

데이터를 저장하거나 가져오는 방법

데이터 저장

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

데이터 호출

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