브라우저 저장소(Web storage, cookie)

HTTP : 웹사이트를 이용할때 사용하는 프로토콜

 

HTTP는 stateless로 상태값을 가지고 있지 않다.

클라이언트가 서버에 요청할 때 이전의 상태를 소멸시키고 접속함 => 사용자의 히스토리를 기억하고 있지 않는다는 것

브라우저에서 서버로 요청(request)을 보낼때 응답을 받는 순간 연결이 끊김

 

그래서 서버는 이 요청만으로는 누가 요청을 한건지 알 수 없기 때문에 응답도 할수 없다.

 

하지만 가끔 누가 요청했는지 기억해야 할 필요가 있음(ex. 로그인이 필요한 곳)

내 웹사이트를 사용하는 유저가 누구인지 알기 위해 cookie가 생김

 

쿠키 cookie

: 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 key:value 형태의 저장소.

 

• 4KB 저장 가능
• 매 요청마다 서버에 쿠키가 함께 전송됨
• 만료일 설정이 가능함(만료일을 설정하지 않을 경우 세션 쿠키가 됨)
• 암호화가 따로 되지 않아 정보 도난 위험 존재

 

어떤 정보를 저장할까?

 

• 로그인창 아이디 자동완성
• 공지메시지 하루 안보기
• 쇼핑몰 사이트에서 비로그인 상태로 장바구니에 물건 담기

 

쿠키는 매 요청마다 서버에 전송되기 때문에 서버로 보낼 필요가 없는 데이터도 같이 보내져서 데이터 낭비가 발생한다.

이런 데이터들을 웹 스토리지인 세션 스토리지와 로컬 스토리지에 저장할 수 있다.

 

 

웹 스토리지

 : 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소

 

• 키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
• 쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
• 많은 양의 데이터를 웹사이트의 성능과 상관없이 저장할 수 있다.
• HTML5를 지원하지 않는 브라우저에서는 사용이 어려움
• 데이터의 영구성을 기준으로 나눌 수 있음(세션 스토리지, 로컬 스토리지)

 

1) 세션 스토리지(session storage)

: 세션 스토리지에 저장된 데이터는 브라우저를 닫으면 제거됨

(현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지됨)

• 데이터 유지 측면에서는 지속적으로 보관되지 않기 때문에 세션 쿠키와 성질이 비슷함

 

어떤 정보를 저장할까?

 

• 자동 로그인, 장바구니 같이 브라우저를 닫았다가 다시 열였을때도 유지해야 하는 데이터는 저장하기 어려움
• 일회성 로그인 같은 잠시동안 필요한 정보를 저장하기에 적합함

 

2) 로컬 스토리지(local storage)

: 데이터를 지우기 전까지는 계속 남아 있기 때문에 보안에 민감하지 않은 사용자 설정이나 데이터들을 저장하고 활용

 

어떤 정보를 저장할까?

 

• 자동 로그인, 테마 설정(다크 모드) 같은 지속적으로 필요한 데이터
• 따로 지워주지 않으면 계속 브라우저에 남아있어 비밀번호 같은 중요한 정보는 넣어두면 위험함

 

※ 면접 대비 질문

 

브라우저 저장소에 대한 차이점을 설명해주세요

 

▶ 기본적으로 쿠키와 로컬 스토리지, 세션 스토리지는 모두 브라우저에서 데이터 저장소의 역할을 합니다. 웹에서 로그인을 하기 위해서는 토큰을 발급받아 API를 호출해야 하는데 매번 이 작업을 반복하는 것은 비효율적이기 때문에 쿠키를 서버와 클라이언트에 생성해 토큰을 발급할 필요없이 쿠키만으로 서버에 요청을 할 수 있게 됩니다. 하지만 쿠키는 암호화가 없어 정보 도난 위험이 크고, 저장 공간이 4KB로 작은편이라 이러한 단점들을 보완한 웹 스토리지가 만들어졌습니다.

5~10MB의 큰 저장공간을 가지는 웹스토리지는 서버에 클라이언트 데이터를 저장하지 않고 브라우저에 저장하는데, 로컬 스토리지와 세션 스토리지로 나뉘게 됩니다. 로컬 스토리지는 브라우저에 정보가 계속 남아있지만, 세션 스토리지는 해당 브라우저가 닫히면 데이터가 사라진다는 특징이 있습니다.

 

 

 

참고자료

 

https://ykss.netlify.app/web/storage_session_cookie/

웹 스토리지 vs 쿠키 vs 세션

 

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

https://junghyeonsu.tistory.com/265?category=913192 

[개발지식] 브라우저 저장소, 각각에 대해서 자세히 알고 계신가요?

 

https://www.youtube.com/watch?v=tosLBcAX1vk&t=19s

https://www.youtube.com/watch?v=OpoVuwxGRDI&t=129s