브라우저 저장소에 대하여

chaticker·2022년 4월 19일
0

Web

목록 보기
1/1
post-thumbnail

면접 대비(?)용으로 어렴풋이 알고 있던 개념을 상세하게 정리하려고 한다. 웹 개발자라면 브라우저 저장소에 대한 개념 숙지는 필수..!


브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로, 쿠키와 비슷한 기능이다. 브라우저 저장소를 알기 전에 쿠키가 뭔지부터 알고 가자.

쿠키

브라우저에 저장되는 Key-Value쌍의 작은 데이터 파일

쿠키의 동작 방식

1) 클라이언트가 서버에 로그인 요청

2) 서버는 클라이언트의 로그인 요청의 유효성을 확인하고(아이디와 비밀번호 검사) 응답 헤더에 set-cookie: user=chaticker를 추가하여 응답

3) 클라이언트는 이후 서버에 요청할 때 전달받은 cookie: user=chaticker 쿠키를 자동으로 요청 헤더에 추가하여 요청

즉, 클라이언트와 서버가 지속적으로 데이터를 교환하기 위해 만들어진 것이 '쿠키'이다.

그렇다면, 웹 스토리지는 뭘까?

웹 스토리지

웹의 데이터를 클라이언트에 저장할 수 있는 자료구조. key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회한다.

로컬 스토리지

1) 브라우저 내에서 정보가 영구적으로 저장, 유지된다.
2) 도메인만 같으면 전역으로 데이터를 공유할 수 있다.

세션 스토리지

1) 브라우저가 열려있는 동안만 데이터가 유지된다.
2) 도메인이 같아도 브라우저가 다르면 데이터가 공유되지 않는다.

쿠키와 웹 스토리지의 차이점?

1) 웹 스토리지는 쿠키와 달리 서버에 전송되지 않아 서버에 부담이 가지 않는다.
2) 웹 스토리지는 필요할 때만 꺼내 사용할 수 있으므로, 자동 전송의 위험성이 없다.
3) 웹 스토리지는 쿠키에 비해 용량이 크다.
4) 쿠키는 만료 일자가 있어 비영구적이지만, 웹 스토리지의 로컬 스토리지는 영구적이다.

profile
개발계발

0개의 댓글