TIL. DevTool( Application)/wecode

🍰 케이크팀 - Application panel

- Application 패널의 기능은?

브라우저 저장소
Local storage, Session Storage, Cookie

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

1.local storage
local storage는 지우지 않는 이상 영구 저장, lifecycle이 길다

2.session storage
tab을닫고 창을 닫으면 날라감

3.cookie
가벼워서 로딩이 쉬운데 불필요한 용량차지가 있음
cookie는 하드에 저장이 되서 expire date가 있어서 설정에 따라 삭제하는 기간이 다름

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

Local Storage, Session Storage, Cookie 활용 예시

:: 어떤 데이터를 어디에 저장하면 좋을까?

• Local Storage
  1)지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  2)UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
• Session Storage :
  1)잠깐 동안 필요한 정보
  2)ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
• Cookie
  1) 서비스 직접적이지 않은 데이터
  2)오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.

❗️ 비밀번호와 같은 중요정보는 스토리지에 저장하면 위험합니다. 로컬스토리지나 세션스토리지는 클라이언트 사이드 이기 때문에 쉽게 해킹당할 수 있기 때문입니다. 사이트/서비스의 특성, 회사의 방침에 따라 user data 를 어떻게 처리 하는지 전부 다르기 때문에 서비스 특성이나 기획에 맞게 적절하게 처리합니다.

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

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