[Web] 쿠키, 웹 스토리지

이정훈·2021년 10월 19일
0
post-thumbnail

페어 프로그래밍을 진행하면서 상태를 저장해야 하는 경우가 있었는데, 쿠키와 로컬 스토리지 세션 스토리지 중에서 어떤 것을 사용해야 할 지 명확하게 판단을 내릴 수가 없었다. 이번 기회에 각 방식의 특징과 어떤 경우에 무엇을 사용할지 판단을 내리기 위해서 이번 글을 작성하게 되었다



쿠키

HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다.
브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재요청 시 저장된 데이터를 함께 전송한다.

과거엔 클라이언트 측에 정보를 저장할 때 쿠키를 주로 사용하곤 했다. 쿠키를 사용하는 게 데이터를 클라이언트 측에 저장할 수 있는 유일한 방법이었을 때는 이 방법이 타당했지만, 지금은 웹 스토리지를 사용해 정보를 저장하는 것을 권장한다.


쿠키의 단점

  • http 통신을 할 때 매번 서버에 전송된다.
  • 로컬 스토리지는 5mb까지의 데이터를 저장할 수 있는 반면, 쿠키는 4kb까지의 데이터만 저장할 수 있다.


웹 스토리지

웹 스토리지 API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공한다. 종류로는 로컬 스토리지세션 스토리지가 있다. 이들은 window 전역 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속받기 때문에 동일한 메소드들을 가진다.

쿠키와 달리 서버에 전송되지 않으므로 서버에 부담이 가지 않고, 더 많은 데이터를 저장할 수 있다.


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

로컬 스토리지는 세션 스토리지와 비슷하지만, 로컬 스토리지의 데이터는 만료되지 않고 세션 스토리지의 데이터는 페이지 세션이 끝날 때 제거되는 만료성의 차이가 있다.

  • 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다.
  • 페이지를 새로운 탭이나 창에서 열면, 새로운 세션을 생성한다.
  • 탭/창을 닫으면 세션이 끝나고 세션 스토리지 안의 객체를 초기화시킨다.

웹 스토리지의 키와 값은 항상 각 문자에 2바이트를 할당하는 DOMString의 형태로 저장한다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환한다. 불리언 타입으로 값을 저장해서 사용하고 싶다면, 값을 받아올 때 JSON.parse 메서드를 사용하면 된다. 또는 객체를 값으로 저장하고 싶다면 JSON.stringify 메서드를 사용하면 된다.



정리

로컬 스토리지와 세션 스토리지는 데이터의 세션이 종료되어도 데이터를 유지할 것이냐 하지 않을 것이냐에 따라 무엇을 사용할 지 결정한다.

웹 스토리지와 쿠키 중 무엇을 사용할지는 몇 가지 사항을 고려해야 한다.

우선 로컬 스토리지는 자바스크립트 코드를 통해 삭제하지 않으면 데이터는 자동으로 삭제되지 않기 때문에 큰 데이터를 더 오랜 시간동안 저장해야 하는 경우에 유용한다.

다만 로컬 스토리지를 잘 사용하려면 저장된 데이터의 위협 수준이 낮아야 한다. 쿠키는 HttpOnly를 사용하면 XSS를 방어할 수 있는 반면, 로컬 스토리지는 XSS에 취약할 수 있기 때문이다.

그렇기 때문에 프론트엔드 개발자 입장으로 생각해 봤을 때, 보안적인 측면에서 중요성이 높지 않은 데이터들은 만료일을 설정해줘야 하는 경우ex) 하루동안 이 팝업창 보지 않기에만 쿠키를 사용해 저장하고, 그 외에는 웹 스토리지 API를 사용해야겠다고 결론을 내렸다.

보안적인 측면에서 중요성이 높은 데이터의 경우에는 아직 결론을 내리지 못했지만 계속해서 고민해봐야겠다.




reference
https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies
https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
https://erwinousy.medium.com/%EC%BF%A0%ED%82%A4-vs-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-28b8db2ca7b2

0개의 댓글