브라우저 저장소의 종류는 쿠키와 웹 스토리지 두가지로 나눠지고,
웹 스토리지는 Local Storage와 Session Storage로 이루어져 있습니다.
쿠키와 웹 스토리지 모두 웹 브라우저(클라이언트 측) 내부에 데이터를 저장하기 위한 메커니즘입니다.
Cookie
쿠키는 사용자가 웹사이트를 방문할 때마다 사용자 브라우저에 저장되는 작은 데이터 조각입니다. 서버와 클라이언트의 지속적인 데이터 교환을 위해 만들어졌으며 클라이언트가 쿠키를 서버에 보내면, 서버는 쿠키를 읽어 요청자를 파악할 수 있습니다. 만료기한을 설정해 해당 기간이 지나거나 브라우저가 닫히면 삭제될 수 있으며, 브라우저의 요청 헤더에 쿠키를 포함하여 서버로 전송됩니다.
쿠키의 장점 & 목적
- 세션 관리: 해당 사용자의 로그인 정보, 접속 및 체류시간, 장바구니에 담은 상품 등 서버가 알아야될 정보를 클라이언트 단에서 서버에게 보내줄 수 있습니다.
- 개인화: 팝업창의 오늘 하루 보지 않기, 유저의 정보등을 저장해 사용자에 맞는 페이지를 제공할 수 있습니다.
- 트래킹: 2번과 이어지는 맥락으로 저장한 사용자 정보를 바탕으로 사용자 행동 및 패턴을 분석해 결국은 사용자에 맞춤화된 페이지를 제공할 수 있는 것이죠.
그래서 우리는 맨~날 사이트만 들어가면 웹사이트의 쿠키동의 확인부터 누르고 시작해야 했던 것이죠 ㅎ
그럼 장점만 있을까요
단점도 있겠지요
쿠키의 단점
- 적은 용량: 4KB 라는 용량제한과 한 사이트 당 20개의 쿠키만을 수집할 수 있습니다.
- 취약한 보안: 사용자가 들고다니는 저장소인데 털리기 쉽고, 개인정보 보호 문제가 있을 수 있습니다. 특히 공용PC에서 쿠키 관리 잘못하면... 쥬금뿐입니다. (로그인 정보 등)
- 데이터 전달 낭비: 가랑비에 옷 젖는다고 4KB이지만 매번 요청하고 응답을 받아들이는 과정을 여러 사이트에서 동시에 진행할 시 필요없는 데이터 까지도 전달되어 속도가 저하될 수 있겠죠.
Web Storage
그래서 등장한 웹 스토리지(Web Storage)는 HTML5부터 새롭게 지원하는 저장소로 쿠키의 단점을 보완하여 클라이언트에 데이터를 저장할 수 있게 설계되었습니다. 데이터의 지속성에 따라 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 나뉩니다.
Local Storage
"클라이언트 측에서만 데이터를 저장하는 영구 저장소"로 가볍지만 기능이 많지 않고 단순히 key(키):value(값)을 String 타입으로 저장합니다. 도메인마다 별도의 Local Storage가 생성되며, 오프라인 상태에서도 사용할 수 있고 브라우저의 JS코드에서도 액세스가 가능합니다. 최대 저장용량은 5~10MB로 제한하여 간단한 텍스트만 담을 수 있지만 만료기간 없이 저장이 가능하여 주로 자동로그인 기능으로 사용됩니다.
Session Storage
"브라우저 창이 열려있는 동안에만 데이터가 유지되는 임시 저장소"로 브라우저가 닫히면 데이터는 자동 삭제됩니다. 그러나 페이지 전환 혹은 새로고침에는 영향을 받지 않으며 도메인마다 별도로 저장소가 생성이 되긴 하지만 오롯이 "탭/창"으로만 저장영역이 나누어 집니다. 즉 같은 도메인이더라도 브라우저가 다르면 저장된 데이터가 다릅니다. 주로 일회성 로그인 기능으로 사용됩니다.
두 기술(Cookie와 Web Storage)의 차이점
- 저장 용량
쿠키 : 최대 4KB
로컬 스토리지 : 5MB이상
세션 스토리지 : 브라우저 세션이 종료될때까지 데이터 보유
- 서버로 전송 여부
쿠키 : HTTP 요청에 대해 자동으로 서버로 전송
웹스토리지 : 클라이언트에 저장만 할 뿐 서버로 자동으로 전송되지 않음
- 수명
쿠키 : 만료날짜를 지정하여 수명을 설정 가능(만약, 만료날짜가 지정되지 않으면 쿠키는 브라우저 세션이 종료될때까지 유지)
로컬 스토리지 : 영구적으로 데이터 저장
세션 스토리지 : 브라우저 창이 열려있는 동안 데이터 저장
- 사용 용도
쿠키 : 사용자 식별, 사용자 상태 관리, 광고 추적 등
로컬 스토리지 : 자동 로그인
세션 스토리지 : 장바구니, 일회성 로그인
정리
브라우저 저장소는 웹 애플리케이션에서 매우 중요한 역할을 합니다. 기업 입장에서는 사용자 경험을 개선하고 개인화된 콘텐츠를 제공하기 위해 사용할 수 있겠죠. 하지만 이에 따른 보안과 개인정보 보호 문제도 동시에 고려해야 합니다. 요즘 소위 얘기하는 그놈의 알고리즘이 브라우저 저장소를 정보로 나오는 거니까요. 내가 뭘 검색했는지 추적해 그 광고만 주구장창 보여주는 브라우저들. 저는 조금 무섭습니다.
따라서 개발자로서 브라우저 저장소를 사용할 때는 신중하게 데이터를 다루고, 보안에 대한 문제를 유념하며 사이트를 개발해야 할 것 같다는 생각입니다. ;ㅅ;
참고사이트
https://chihoya.tistory.com/15
https://velog.io/@limuubin/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%A0%80%EC%9E%A5%EC%86%8C-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0
https://ryuhojin.tistory.com/10
