쿠키, 세션, 웹 스토리지

쿠키와 세션 그리고 HTML5부터 등장하는 웹 스토리지에 대해서 알아보자.

세션은 쿠키를 기반으로 동작한다.
1. 클라이언트의 요청에 의해 서버는 인증 후 클라이언트 고유의 session id 를 발급해준다.
2. 클라이언트는 이 session id를 쿠키에 저장한다.
3. 클라이언트는 요청마다 session id를 서버에 전송한다.
4. 서버는 session id 를 통해 클라이언트를 식별 후 해당하는 정보를 제공.
쿠키와 다르게 서버에서 관리된다. (보안적인 면에서 쿠키보다 우수)
사용자가 많을 수록 서버에서 관리하게 될 데이터가 많아지고 이는 메모리를 많이 소모하게 된다

위에서 언급한 쿠키와 세션의 단점을 보완 하기 위해 등장했다. 웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있다.

이 둘의 가장 큰 차이점은 영구성에 있다.

이 스토리지들은 용량이 5MB~10MB 정도인데 쿠키가 4KB임을 감안하면 꽤나 큰 사이즈임을 알 수 있다.

사용법은 어렵지 않다. 둘 모두 전역객체 window안에 내장되어 있다. 쿠키와 마찬가지로 key-value 형태로 데이터를 저장한다.

value 값에 객체를 저장하고자 할 때는 JSON.stringify를 사용하고 이를 다시 가져올 때는 JSON.parse 를 사용하도록 하자.

window.localStorage.setItem('name', 'Kanté');

window.localStorage.getItem('name') // 'Kanté'

다만, 이 둘의 차이점이 분명히 존재하기 때문에 목적에 맞게 사용해야할 것이다.

목차