[기타] 개발자도구 - Application panel

c0zyb1ue·2022년 9월 23일
0

개발자도구

목록 보기
1/4

Application panel

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

0. 알아둬야할 개념 - Web storage

해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능
키/값 쌍으로 데이터를 저장
영구저장소(LocalStorage)와 임시저장소(SessionStorage)

특징

  1. 서버 전송이 없다.
    저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어 지지 않는다. 이는 네트워크 트래픽 비용을 줄여준다.

  2. 단순 문자열을 넘어 객체정보를 저장할 수 있다.
    문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 점은 개발편의성을 제공해주는 주요한 장점이다. 단, 브라우저의 지원 여부를 확인해 봐야 하는 항목이다.

  3. 용량의 제한이 없다.

  4. 영구 데이터 저장이 가능하다.
    만료 기간의 설정이 없다. 즉, 한번 저장한 데이터는 영구적으로 존재한다.

필요한 이유

쿠키와 Web Storage 모두 브라우저에 저장되지만 쿠키는 아래와 같은 단점이 있다. 쿠키의 단점을 Web Storage를 사용함으로써 극복할 수 있다.

  1. 4KB의 데이터 저장 제한

  2. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안이 취약하다.

  3. 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스 성능에 영향을 줄 수 있다.


Storage: 브라우저의 저장소

Local Storage: 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다. Key-Value 페어의 객체 형태로 데이터 저장.

Session Storage: 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다. Key-Value 페어의 객체 형태로 데이터 저장.

Cookie: 시간 제한 설정 가능. 쿠키는 프론트-백엔드 통신과 관련이 있음 >> 용량이 작을 수 밖에 없음. Key-Value 페어의 문자열 형태로 데이터 저장(세미콜론으로 구분). 텍스트 타입이라 문자열만 저장.

Local Storage

  • 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  • UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)

Session Storage

  • 잠깐 동안 필요한 정보
  • ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택

Cookie

  • 서비스 직접적이지 않은 데이터
  • 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등

회사의 방침에 따라 user data 처리여부 달라진다.
(비밀번호와 같은 중요정보 스토리지에 저장 금지)

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

데이터 저장
localStorage.setItem("key", "value")
sessionStorage.setItem("key", "value")
setcookie("key", "value", "지속시간 (초단위)")

데이터 호출
localStorage.getItem("key")
sessionStorage.getItem("key")
document.cookie

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

0개의 댓글