개발자 도구 - Application panel

크롬 개발자 도구

단축키: Windows 기준 F12 또는 ctrl + shift + i

 

개발자 도구란 브라우저가 제공하는 tool이다. element, console, network, application 등 여러 panel이 있다.

이 중 application panel에서는 storage(브라우저 저장소)를 확인할 수 있다. Local storage, session storage 그리고 cookie가 있다.

storage에 저장된 데이터는 key-value 형태의 객체이다.

어떤 데이터를 storage에 저장할지 서비스 기획 및 특성에 맞게 적절히 계획하고 처리해야 된다.

클라이언트 사이드에 저장되기 때문에 중요 정보를 저장하는 건 위험하다.

쿠키(cookie)

쿠키는 작은 데이터 파일으로, 클라이언트가 서버에 보낸 요청을 서버가 확인하고 나서 쿠키를 추가해 응답한다. 이후 클라이언트가 서버에 요청을 보낼 때마다 쿠키를 포함하여 통신한다. 용량은 작지만 매 http 요청마다 담겨 유효성 확인의 대상이 되니 서버에 부담을 준다.

유효기간을 설정할 수 있다. 텍스트 타입이라 문자열만 저장할 수 있다. 개당 4kb, 최대 300개까지 저장할 수 있다.

web storage

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

local storage

사용자가 지우지 않는 이상 계속 클라이언트 웹브라우저에 남아있다. storage 3가지 중 허용 용량이 가장 크다(10mb).

지속적으로 필요한 정보를 저장하기에 좋다.

session storage

브라우저 윈도우나 탭을 닫을 경우 제거된다. 동일한 탭이어도 다른 도메인이라면 별개의 session storage가 생성된다.

잠시 동안 필요한 정보를 저장하기에 좋다.

처리 예시

로그인 후 작성하는 form 형식이 들어있는 페이지를 가정한다.

1. 매번 새로 로그인하는 게 싫다면 자동 로그인 기능이 필요하고, user token 등을 local storage에 저장해야만 나중에 브라우저 창을 새로이 열었을 때도 로그인 상태가 유지된다.

2. form에 작성한 정보는 다 입력한 뒤 button click event 등으로 서버에 넘어갈 예정이라면 그 전까진 전송이 불필요하다. 하지만 탭을 새로고침 하거나 켠 채로 냅두는 동안 작성해둔 정보가 날아가면 안 된다. 이런 정보는 session storage에 저장해야 된다.

3. form 페이지에 오늘까지만 하는 이벤트 팝업을 띄우고 싶다. 그러면 쿠키의 유효 기간 설정을 통해 필요한 기간 동안만 정보를 전달할 수 있다.

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

• 데이터 저장
  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")
• 데이터 호출
  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie
• 기타 메소드
  • 외에도 removeItem, clear 등등의 공통 메소드 존재

 

 

참고 링크

[WEB] 쿠키, 웹 스토리지 (로컬 스토리지, 세션 스토리지) - 정리 정말 잘 되어 있다!

쿠키 vs 로컬스토리지: 차이점은 무엇일까?

[Javascript] HTML5 Web Storage 를 언제 사용해야 할까? (cookie 대신 활용한 사례)

[HTML5 튜토리얼] Web storage (localStorage, sessionStorage)
쿠키 vs 세션 참고 링크1

쿠키 vs 세션 참고 링크2

쿠키 vs 세션 참고 링크3

세션에 대한 개념이 부족해 그에 대한 자료를 찾았다. 발표 때 HTTP 통신과 세션의 이미징을 위해 간략히 언급했다.