Application panel

Application panel의 기능

• 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람할 수 있는 패널
• 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사한다.

storage의 종류

• web storage(HTML 5에서 새로 추가된 저장소)
  Key-Value 페어의 객체 형태로 데이터 저장
  서버로 데이터 전송x
  용량이 큼

  local storage:
  삭제하지 않는 이상, 클라이언트의 정보를 영구적으로 저장
  session storage:
  세션이 종료되면 클라이언트의 정보 삭제

• cookie(HTML 5 이전부터 사용되어온 저장소)
  Key-Value 페어의 문자열 형태로 데이터 저장
  서버로 데이터 전송o
  용량이 작음

storage의 사용 예시

• web storage(HTML 5에서 새로 추가된 저장소)
  Key-Value 페어의 객체 형태로 데이터 저장
  서버로 데이터 전송x
  용량이 큼

  local storage:
  지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  보안이 중요한 영구 데이터 (자동 로그인). 영구적으로 저장되어도 상관 없는 데이터들
  사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용
  인터넷 연결이 잘 유지되지 않는 지역에서 수집된 데이터를 보호하고 저장하는데 사용할 수 있음
  UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
  자동 로그인기능

session storage:
잠깐 동안 필요한 정보
보안이 중요한 임시 데이터 (은행 로그인). 민감한 데이터.
휘발성 데이터를 저장할 때 사용
일회성 로그인 정보, 입력 폼 정보, 비회원 장바구니
ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택

• cookie(HTML 5 이전부터 사용되어온 저장소)
  서비스에 직접적이지 않은 데이터
  빠른 처리가 필요한 임시 데이터(광고 팝업)
  서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용
  팝업창 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장
  문자열만 저장할 수 있음
  ex. 웹사이트들은 로그인을 한 후 Cookies를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지않아도 되게 된다. 또한 사이트에서 제한된 인터넷 사용 기록을 기반으로 사용자 경험을 개선할 수 있다.
  오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

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

• 데이터 저장

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

• 데이터 호출

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

• 기타 메소드

  • 외에도 removeItem, clear 등등의 공통 메소드 존재
  
  

  출처: https://velog.io/@2wo0/Application-panel