개발자 도구 - local storage, session storage, cookie

팀별과제중에 개발자도구 라는 주제를 가졌다.
우리팀은 개발자도구 중에 local storage, session storage, cookie 를 맡아서 진행했다.

개발자 도구

브라우저에서 제공하는 tool이다.(브라우저마다 개발자 도구가 있다.)
웹사이트디버깅을 빠르게 할 수 있도록 도와준다.

🔑 개발자 도구 열기

• 윈도우 f12
• 맥 command + option + j

1.Application 패널의 기능은?

• 브라우저에 저장되어 있는 저장소
• 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)
• 작은 정보들을 저장하는 수단
• 보안에 취약하여 개인정보저장을 최소화해야함

2.local storage, session storage, cookie 차이점은?

✍🏻 local storage

사용자가 삭제 하지 않는 이상 영구적으로 저장되고 key value 페어의 객체 형태로 데이터가 저장된다.

장점 : 서버에 불필요한 데이터를 저장을 안하고, 용량이 크다.
단점 : html4만 지원되는 브라우저에는 지원이 안된다.

✍🏻 session storage

세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거되고 key value 페어의 객체 형태로 데이터가 저장된다.

장점 : LocalStorage와 같음. 단지 기능 차이
단점 : LocalStorage와 같음. 단지 기능 차이

✍🏻 cookie

시간 제한 설정 가능, 쿠키는 프론트-백엔즈 통신과 관련이 있다 그래서 용량이 작을 수 밖에 없다.key value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분), 텍스트 타입이라 문자열만 저장된다.

장점 : 대부분의 브라우저에 지원이 다 된다.
단점 : api가 한번 더 호출되므로 서버에 부담이 증가된다.

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

• Local Storage
  • 지속적으로 필요한 데이터 (data persistant)
  • KTX홈페이지 나 Naver 검색기능 등에 이전 입력 데이터가 저장
• Session Storage
  • 잠깐 동안 필요한 정보
  • 은행 사이트,로그인 유지, 장바구니 등
    
• Cookie
  • 서비스 직접적이지 않은 데이터
  • 오늘만 하는 이벤트 팝업 창 등

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

• 데이터 저장
  • localStorage.setItem("key", "value")
  • sessionStorage.setItem("key", "value")
  • setcookie("key", "value", "지속시간 (초단위)")
    
    
• 데이터 호출
  • localStorage.getItem("key")
  • sessionStorage.getItem("key")
  • document.cookie