영속성의 차이! 로컬스토리지, 세션스토리지, 쿠키에 대해 알아보자.

 

오랜만에 돌아온 조이로그 티스토리 🎉

새해 기념, 그리고 인턴 생활 시작 기념 다시 한 번 티스토리를 꾸준히 작성해보려 한다.

 

사실 작년까지 직접 제작한 깃허브블로그에서 포스팅을 이어나가고 있었는데,

편집기, 카테고리 설정 등 한계가 있다고 생각해 다시 돌아오게 되었다 😅

 

올 해에는 포스팅 작성에 부담을 느끼지 않고, 기록하고 공유하고 싶을 때 언제든지 방문하고자 한다.

 

---

 

앞서 말했듯 강남의 한 서비스 회사에서 인턴을 시작하였다!

사실 면접을 볼 때 굉장히 당황스러웠다... 왜냐하면 나의 CS 지식의 현주소를 알아버렸기 때문 🤢

 

직무 관련하여 대강 생각나는 질문은...

 

 

- 프로젝트에서 사용했던 기술 스택에 대한 질문

- (배포된 프로젝트를 보며) 구현 과정에 대한 질문

- 서버가 랜더링되는 과정

- 서버사이드랜더링, 클라이언트사이드랜더링의 차이

- TypeScript 쓰는 이유

- 세션, 스토리지, 쿠키 차이

...

 

 

더 다양한 질문이 있었는데 정말 생소한 개념이여서 머리 속에 담지 못했다 😱

따라서 이 때의 충격을 계기 삼아 CS 지식을 꾸~준히 꼼꼼히 공부해보고자 한다.

회사에서 일하다 "?" 가 생기는 지식을 위주로 정리할 것이다.

 

 

---

 

로컬 스토리지(localStorage), 세션 스토리지(sessionStorage)

 

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소이다.

key-value 스토리지의 형태로, 간단한 키와 값을 저장할 수 있다.

 

둘의 차이점은 영속성

로컬 스토리지 : 사용자가 지우지 않는 이상 계속 브라우저에 남아 있는다. (영속성 O) (Ex. 자동 로그인)

세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 제거된다. (영속성 X) (Ex. 일회성 로그인 정보)

단, 두 스토리지 모두 클라이언트 단이기 때문에 비밀번호같은 중요한 정보는 절대! 저장하면 안된다.

 

+ 두 스토리지는 모두 window 객체 안에 들어 있다. Storage 객체를 상속받기 때문에 메소드가 공통적으로 존재한다.

+ 도메인 별 용량 제한도 있다. 브라우저별로, 기기별로 다르지만 모바일은 약 2.5mb, 데스크탑은 약 5mb~10mb라고 한다. 만약 부족하다면 50mb를 기본적으로 저장할 수 있는 IndexedDB가 존재한다.

 

---

쿠키

쿠키는 로컬 스토리지, 세션 스토리지가 등장하기 전에 사용했던 저장소이다. 만료 기한이 있는 키-값 저장소이다.

쿠키는 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송된다.

 

왜 쿠키가 서버에 전송될까?

 

HTTP 요청은 상태를 가지고 있지 않다. (= 요청 자체만으로 요청이 어디에서 오는지 알 수 없어, 응답을 보낼 수 없다)

이 때 쿠키에 요청 보낸 곳에 대한 정보를 담아서, 서버로 보내면 서버는 쿠키를 읽어서 어디서 요청을 보냈는지 파악한다.

쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 계속 전송되는 것이다.

 

만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용한다. 4kb 중에는 서버에 필요하지 않은 데이터들도 있어 데이터 낭비가 발생할 수 있다.

 

서버에 보내지 않을 데이터는 로컬 스토리지와 세션 스토리지에 저장한다. 이 두 저장소의 데이터는 서버로 자동 전송되지 않아 데이터 낭비를 방지할 수 있다.