웹 저장소 웹 스토리지와 쿠키에 대해서

로컬 스토리지, 세션 스토리지, 쿠키에 대해서 알아봅시다.


들어가며

개발에 뛰어들기 전부터 자주 봐왔던 [오늘 하루 열지 않기] 혹은 [다시 보지 않기] 버튼
최근에 레이어 팝업 작업을 하면서 [오늘 하루 열지 않기] 기능을 쿠키를 사용해 작업하게 되었습니다.
그런데, 이런 질문을 받았어요. ‘다시 보지 않기 기능을 구현해야 해도 쿠키를 사용할 것인가?’
확실한 대답을 할 수가 없었습니다! 왜냐..! 기능을 구현하면서도 그저 결과물에만 집중했을 뿐,
왜 이렇게 하는지에 대한 이해가 부족했던 것이었어요.
UX 관점에서 보았을 때도, 웹 저장소를 활용해 구현할 수 있는 기능은 사용자에게 좋은 경험을 제공해 주기도 하니까 더더욱이 깊은 이해가 필요했습니다.
그래서! 오늘은 개발자라면 당연히 알아야 할 웹 저장소들에 대해서 포스팅해 보려 합니다.



개념 익히기

오늘 알아볼 웹 저장소는 쿠키, 그리고 웹 스토리지(로컬, 세션) 입니다.
차례대로 특징 및 장단점을 먼저 알아볼까요?

(1)쿠키

  • 가장 기본이라고 할 수 있는 오래된 웹 저장소
  • 대부분의 브라우저가 지원
  • 서버 요청을 할 때마다 자동으로 서버에 전송
  • 서버와 로컬의 정보를 저장
  • 유효기간을 지정할 수 있다
  • 용량이 4kb로 제한적
  • 임의로 고치는 것이 가능해서 보안에 취약
  • 보안에 취약하기 때문에 지워져도 큰 문제가 없을 수준의 정보를 저장하는데 사용하는 것을 권장

(2)웹스토리지

  • 쿠키의 단점을 보완하기 위해 html5에서 탄생
  • 로컬 스토리지, 세션 스토리지가 있다
  • html5를 지원하지 않는 브라우저의 경우 사용이 불가
  • key, value 형태로 이루어짐
  • 클라이언트에 대한 정보 및 데이터를 서버에 불필요하게 저장하지 않으며, 로컬에만 정보를 저장
  • 약 5mb로 용량이 크다
  • 매번 서버에 전송되지 않으므로 부담이 적다(명시적 전송 가능)
  • 필요한 경우에만 꺼내 쓰므로 자동 전송의 위험성이 없다

(2)웹스토리지 - 로컬 스토리지

  • 비교적 단순하고 사용하기 쉽다
  • 저장할 수 있는 용량이 제한적이다
  • 간단한 텍스트 데이터만 가능
  • 만료 기한 없이 저장(사용자가 지우지 않는 이상 계속 브라우저에 남아 있다)
  • ex) 자동 로그인
  • 지속적으로 필요한 정보를 저장하기 좋다
  • 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가하다
  • 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다

(2)웹스토리지 - 세션 스토리지

  • 종료나 새 탭을 열 경우 데이터가 삭제됨
  • 같은 탭 안에서는 저장됨
  • ex) 자동 입력, 장바구니
  • 쿠키를 기반으로 하고 있지만, 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리
  • 사용자에 대한 정보를 서버에 두기 때문에 비교적 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 됨
  • 동일한 탭/윈도우라도 다른 도메인이라면 다른 세션 스토리지가 생성됨
  • 서로 다른 세션 스토리지는 서로 영향을 주지 않으며, 독립적으로 동작한다
  • 잠시 동안 필요한 정보를 저장하기에 좋다



쿠키 vs 웹 스토리지


쿠키 웹스토리지
용량 4kb 용량 5mb
대부분의 브라우저 지원 html5를 지원하지 않는 브라우저의 경우 사용 불가
매 서버 요청마다 서버로 쿠키가 같이 전송 서버에 전송되지 않으므로 부담이 적음
서버와 로컬의 정보를 저장 로컬에만 정보를 저장


로컬 스토리지 vs 세션 스토리지


로컬 세션
만료 기한 없이 저장 종료, 새 탭을 열 경우 데이터가 삭제
지속적으로 필요한 정보를 저장하기에 좋다. 잠시 동안 필요한 정보를 저장하기에 좋다.


값을 가져오는 방법

A === Key


쿠키 로컬 세션
getCookie(“A”) localStorage.A
localStorage.getItem(“A”)
sessionStorage.A
sessionStorage.getItem(“A”)


세팅하는 방법

A === Key, B === Value, C === 유효기간


쿠키 로컬 세션
setCookie(“A”, B, C) localStorage.A = B
localStorage.setItem(“A”, B)
sessionStorage.A = B
sessionStorage.setItem(“A”, B)


마치며

자동 로그인, 장바구니, 오늘 하루 열지 않기 등 다양한 기능들이 그저 ‘쿠키’만 활용하면 된다고 생각했는데, 웹 저장소는 다양하고 또 그만큼 용도에 맞게 잘 활용하는 게 중요하다는 것을 알았습니다. 부족한 글이지만 이 글을 읽는 여러분도 웹 저장소와 조금 더 가까워졌길 바랍니다.