🤹‍♀️ Application Panel

🚗 Application Panel의 기능

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

🚃 Local Storage, Session Storage, Cookie 차이점은?

Local Storage와 Session Storage

Local Storage와 Session Storage는 Web Storage로 지속성에 관련해서 두가지로 나눈 것입니다.

Local Storage는 한번 저장하면 명시적으로 지우지 않는 이상 영구적으로 보관되면서 도메인마다 별도로 Local Storage가 생성됩니다.

Session Storage는 반대로 지속적으로 보관되지않고, 현재 페이지가 브라우징되고 있는 내에서만 데이터가 유지됩니다.
즉, 브라우저가 종료되면 Session Storage도 삭제된다.

Cookie

Cookie는 서버와 연동되어 만료 기한이 있는 Key-Value저장소이다. Cookie는 4kb으로 용량이 제한되어 있습니다.

🏎 Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?

Local Storage

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

Session Storage

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

Cookie

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

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

localStorage.key(index)
localStorage.key(index)는 index번째 데이터명을 불러옵니다.

localStorage.getItem(key)
localStorage.getItem(key)는 key의 데이터를 조회합니다.

localStorage.setItem(key,value)
localStorage.setItem(key,value)는 key에 저장되어있는 내용을 value로 설정합니다.

localStorage.clear()
localStorage.clear()는 스토리지 전체를 비워줍니다.