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