Network - 브라우저에서 사용되는 스토리지 / TIL#19

Pablaw·2023년 2월 27일
0

TIL

목록 보기
19/20
post-thumbnail

1. 브라우저에서 사용되는 스토리지 종류
2. 쿠키(Cookie)
3. 웹스토리지(Web Storage)


1. 브라우저에서 사용되는 스토리지 종류

    브라우저에서 사용되는 저장소는 공통적으로 키-벨류 형태의 저장소이며 크게 쿠키(Cookie)웹스토리지(Web Storage)로 나뉜다.
이중에서 웹스토리지는 로컬스토리지(Local Storage)세션 스토리지(Session Storage)로 구분된다.


2. 쿠키(Cookie)

    쿠키는 HTML5 등장 이전부터 브라우저 저장소로 사용되어 왔으며 서버와 클라이언트의 지속적인 데이터 교환을 목적으로 만들어졌다.
그렇기 때문에 HTTP 통신 시 헤더에 필수적으로 담겨서 전달되기 때문에 필수적인 내용이 아니라면 데이터 낭비나 통신 시 기능에 안좋은 영향을 끼칠 수 있다.

    쿠키의 용량은 4kb로 작은 용량으로 제한되어 있고 유효시간이 존재한다는 특징이 있다. 그리고 한 도메인 당 20개의 쿠키를 사용할 수 있고 브라우저 별로 300개의 쿠키를 사용할 수 있다.

    사용 예시로는 로그인, 사용자 정보, '팝업창 다시보지 않기' 등의 개인화 제공 기능이 있다.


3. 웹스토리지(Web Storage)

    웹스토리지는 HTML5 이후 제공되는 기능으로 브라우저 별로 제공되는 용량에 차이가 다소 존재하며 한 사이트 당 대략 5mb 내외로 지원한다. (모바일은 2.5mb, 데스크탑은 5~10mb, IndexedDB는 약50mb)

쿠키와는 달리 명시적으로만 서버로 전송이 가능하기 때문에 자동 전송의 위험이 없고 오리진 단위로 접근이 제한되어 다른 출처의 클라이언트가 사용할 수 없기 때문에 개인 PC로 사용된다는 전제로 비교적 보안이 강화된다.
통신과정에서의 보안 상 강점이 존재하는 것이지 개인정보를 클라이언트에 저장하는 것은 위험하다.

    로컬스토리지(Local Storage)와 세션 스토리지(Session Storage)는 모두 만료기한없이 사용할 수 있지만 세션 스토리지의 경우는 세션(창, 탭)별로 데이터가 관리되기 때문에 세션이 닫히면 사라지게 된다.

반면에 로컬 스토리지의 경우, 브라우저가 닫히더라도 저장되어 있어 사용할 수 있기 때문에 자동 로그인 등에 기능을 구현할 때 사용할 수 있다.


참고 사이트

해당 페이지를 참고하여 작성했습니다.

ZeroCho TV

이안의 평일코딩

profile
반갑습니다, 프론트엔드 개발자를 꿈꾸고 있습니다 ! https://pablaw.github.io/profileLink/

0개의 댓글