쿠키와 세션, 로컬 스토리지

쿠키와 세션은 왜 쓸까? HTTP 프로토콜의 특징을 생각해보자. HTTP 프로토콜은 connectionless, stateless한 특징을 갖고 있다.

connectionless: 클라이언트가 서버에게 request를 보내고, 서버는 클라이언트에게 response를 하면 접속을 끊는다. 요청에 대한 응답을 했기 때문이다. stateless: 클라이언트와 서버의 통신이 끝나면 연결된 상태가 끝난다. 서버가 더이상 클라이언트에 대한 정보를 갖고 있지 않는다.

따라서 계속 유저 인증을 유지하기 위해 쿠키와 세션을 사용한다.

쿠키

제목	내용
정의	클라이언트인 웹 브라우저 로컬에 키-값 형태로 저장하는 작은 데이터 파일
만료 시점	만료 시점을 명시 가능. 브라우저가 종료되더라도 유효시간이 남아있으면 유지(persistent cookies)
저장 위치	클라이언트에 파일로 저장
용량 제한	대략 4KB까지 데이터 저장. 한 도메인 당 20개, 모든 도메인에 대해 300개 제한 (쿠키는 모든 request와 response에 대해 header에 들어가게 되므로 용량 제한이 필요)
사용 사례	오늘 하루 열지 않음 팝업, 장바구니

• HTTP 통신을 할 때마다 매번 서버에 전송되므로 크기가 클 경우에는 서버에 부담이 될 수 있음
• samesite 속성이 strict가 아닐 경우 다른 도메인에서 요청할 때에도 자동 전송되는 위험이 있음 (CSRF 취약)

쿠키의 단점을 보완해서 HTML5에서 웹스토리지라는 기술이 만들어짐. 웹 스토리지에는 로컬 스토리지, 세션 스토리지가 있다.

웹 스토리지

• 쿠키와 달리 개수와 용량의 제한이 없고, 서버에 매번 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능)
• 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험이 없다. 다른 도메인에서 요청하는 경웨 꺼내쓰고 싶어도 도메인 단위로 접근이 제한되는 특성 때문에 값을 꺼내 쓸 수 없다.
• HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
• 세션과 로컬스토리지 둘 다 window 객체의 프로퍼티로 존재하고 같은 storage 객체를 상속받기 때문에 동일한 메소드를 갖는다.

세션과 로컬스토리지의 주요한 차이점은 영구성이다. 지속적으로 필요한 데이터는 로컬스토리지에 저장하고, 잠깐동안 필요한 정보는 세션 스토리지에 저장한다.

세션

제목	내용
정의	일정 시간 동안 같은 사용자, 브라우저로부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술
만료 시점	브라우저가 종료될 때까지 유지
저장 위치	서버에 저장
용량 제한	정해진 용량 제한은 없으나 서버 메모리에 저장하기 때문에 많아질 경우 성능 저하
사용 사례	로그인 상태 유지

• 쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성된다. 즉 window 객체와 동일한 유효 범위 및 생존 기간을 갖고, 탭/윈도우를 닫을 시 데이터가 삭제된다. 또한 동일한 탭/윈도우라도 다른 도메인이라면 또 다른 세션스토리지가 생성된다.
• 서로 다른 세션 스토리지는 서로 영향을 주지 않고 독립적으로 동작한다.

로컬스토리지

• 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다.
• 도메인 별로 생성되며 도메인이 다른 경우에는 로컬 스토리지에 접근할 수 없다.
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.
• 지속적으로 필요한 정보를 담기에 좋다.
• 최대 5MB까지 저장 가능하다