개발자 도구 중에서 Application 패널 기능에 대해

개발자 도구란? : 브라우저에서 제공하는 하나의 도구. 개발자 도구란 웹 사이트를 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로 대응할 수 있도록 도와줌

1. Application 패널의 기능은?

   • 브라우저 저장소의 기능을 담당. 즉, 현재 로딩된 웹 페이지에서 사용된 모든 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 검사할 수 있는 패널.

   • 프로그레시브 웹 앱 디버그

   • 스토리지, DB 및 캐시 검사 및 관리

   • 쿠키 검사 및 삭제

   • 리소스 검사

2. Local Storage, Session Storage, Cookie 차이점은?

   • 공통 사항 : 스토리지는 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. 두 스토리지 모두 html5 에서 새로운 저장 옵션으로 도입이 된 개념이다. 그 전에는 쿠키라는 저장소를 사용했었다. key - value 페어 객체 형태로 데이터가 저장된다.

   • 로컬 스토리지 : 사용자가 지우지 않는 이상 데이터의 영구성이 보장된다.

   • 세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 사라진다. 즉 데이터의 영구성을 보장하지 않는다.

   • 쿠키 : 4kb까지만 저장이 가능하다. 지속 시간을 설정할 수 있다(만료 기간 설정 가능). 직접적이지 않는 데이터를 저장할 때 사용된다. 쿠키는 사이트에서 방문한 페이지를 저장하거나 유저이 로그인 정보를 저장하는 등, 다양한 방법으로 사용이 되지만 문자열만 저장할 수 있다는 제한이 있다. 스토리지 개념 도입 이전 저장소로 사용이 되던 것이어서 여러 가지 성격이 섞여 있는 것으로 생각이 된다.

3. Local Storage, 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
   - 기타 메소드
   - 외에도 removeItem, clear 등등의 공통 메소드 존재