브라우저에 데이터 저장하기
브라우저에 데이터를 저장하는 방법은 여러가지가 있다.
쿠키, 세션, 캐쉬들이 웹에 데이터를 저장하는 방법 중 하나라는 것은 알고 있으나 정확한 차이점, 언제 어떤 때에 무엇을 써야하는지 명확하지가 않았다.
이번기회에 각 기술들의 차이를 명확하게 정리해보려고 한다!
우선 가장 먼저 쿠키와 세션을 알아보자.
쿠키
쿠키는 서버에 의해 응답받은 정보가 브라우저에 저장되는 데이터 저장 방식으로 주로 인증정보에 사용된다. 클라이언트측에서 저장를 하기보다 서버쪽에서 HTTP 응답헤더에 set-cookie에 내용을 넣어 응답하면 브라우저가 해당 내용을 브라우저에 저장한다. 이제 해당 쿠키를 생성하도록한 서버 (사이트)에 접속할때마다 쿠키의 내용이 요청헤더에 담겨 함께 전달된다.
쿠키가 저장되는 순서는 다음과 같다.
- 사용자가 로그인을 요청하면 서버가 응답헤더 set-Cookies에 정보를 저장해 응답한다.
- 브라우저가 해당 정보를 쿠키에 자동 저장
- 같은 도메인(명시에 따라 서브도메인포함)에 정보를 요청하면 요청 HTTP Cookie헤더에 인증정보가 함께 담겨 서버로 요청
- 서버가 요청헤더를 읽어 사용자를 식별
쿠키에 접근하기
자바스크립트를 통해 쿠키에 접근하거나 쿠키를 작성하는것 또한 가능하다. document.cookie 속성을 사용하면 되는데 주의할 점은 cookie 프로퍼티는 데이터 프로퍼티가 아닌 접근자 프로퍼티이다! (getter,setter)
쿠키의 한계
쿠키는 한계가 존재한다. 먼저 하나의 쿠키는 4KB를 넘을 수 없다. 또한, 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여개이다.
그외
그외에도 쿠키에 설정할 수 있는 다양한 옵션이 있다. Secure, HttpOnly, SameStie, path, domain.. 대부분 쿠키의 보안을 강화하기 위한 옵션들이다. 쿠키는 브라우저 자체가 저장되기 때문에 보안적으로 안전하다고 할 수 없다. 중요한 정보는 쿠키에 저장해서는 안된다.
세션
세션은 쿠키와 비슷한 역할을 한다. 둘의 큰 차이점은 데이터가 저장되는 위치이다. 쿠키는 브라우저, 즉 클라이언트측에 저장되나 세션은 서버측에 저장된다는 것이 가장 큰 차이이다. 세션은 단순히 세션아이디만은 클라이언트측에 보내 저장하도록한다. 그리고 그 세션아이디에 해당하는 실제 값은 세션아이디를 키값으로 서버측에 저장된다.
세션이 동작하는 순서는 다음과 같다.
- 사용자가 로그인을 요청하면 서버가 응답헤더 set-Cookies의 session id에 식별정보를 넣어서 응답한다. 그리고 서버측에 session-id를 키값으로 정보를 저장해둔다.
- 브라우저가 해당 정보를 쿠키에 저장한다.
- 창이 꺼지기 전까지 같은 도메인(명시에 따라 서브도메인포함)에 정보를 요청하면 요청 HTTP Cookie헤더에 session-id가 담겨 함께 요청된다.
- 서버가 요청헤더를 읽어 session-id가 존재한다면 해당하는 값을 응답하고 없으면 다시 session-id를 생성해 응답에 함께 전달한다.
세션에 접근하기
클라이언트측에는 단순히 세션ID만 저장되기때문에 정보에 접근할 수 없다. 서버를 통해서만 정보에 접근이 가능하다.
세션의 한계
클라이언트측에는 단순히 세션ID만 저장되고 서버에 요청하는 값이므로 서버의 접속이 가능하다면 제한되는 용량이나 갯수제한은 없다.
그외
세션은 쿠키와 달리 브라우저가 종료되면 저장된 세션정보가 모두 사라진다.
쿠키 vs 세션
그렇다면 쿠키와 세션 중 어느것을 사용하는것이 더 좋을까. 쿠키는 세션보다 속도가 빠르나 보안적으로는 좋지않다. 세션은 보안적으로는 쿠키보다 안전하나 속도가 느리고 서버에 부하를 줄 수 있다. 간단한 정보라면 쿠키를 사용하고 보안적으로 중요한 정보라면 토큰 기반의 인증방식을 채택하는것이 좋다고 한다.
클라이언트에서 데이터를 저장하는 또 다른 방법으로 localStorage와 sessionStorage가 있다.
두 객체는 브라우저 내에 데이터(키-값)을 저장할 수 있게 해준다. 쿠키와 가장 큰 차이점은 서버가 아닌 브라우저내에만 저장된다는 것이다.
localStorage
localStorage는 브라우저에 값을 저장할수 있도록 도와주는 객체이다. localStorage에 저장한 데이터는 서버로 전송되지 않는다. 모든 일은 자바스크립트내에서 수행된다.
localStorage의 특징은 다음과 같다.
- 쿠키와 다르게 서버로 전송되지 않는다.
- getItem, setItem,removeItem등의 메서드로 접근이 가능하다.
- 오리진 , 도메인이 같을 경우 데이터는 모든탭과 창에서 공유된다.
- iterable객체가 아니므로 순회가 불가능하다. 5.값과 데이터로 문자열만 사용이 가능하다. 형변환이 자동으로 일어난다.
sessionStorage
sessionStorage 또한 localStorage처럼 자바스크립트 내에서 데이터를 저장하기위한 객체이다. localStorage와 제공하는 메서드와 속성들도 동일하다. 다만, sessionStorage는 몇가지 제약사항이 존재한다.
sessionStorage의 제약사항
- storage는 현재 떠있는 탭에서만 유효하다. 즉, 같은 도메인, 같은 페이지여도 다른 탭에 떠있다면 정보공유가 불가능하다.
- 페이지가 종료되면 데이터는 사라진다. (새로고침시에는 유지된다.)
이러한 제약사항들때문에 sessionStorage는 잘 사용되지 않는다고 한다.
storage 이벤트
sessionStorage나 localStorage에 데이터 변화가 발생할때 해당 스토리지를 공유하는 모든 페이지에서 storage이벤트가 실행된다. 즉 탭 두개에 A라는 사이트를 띄어두었을때, 하나의 탭에서 Storage가 갱신되면 다른 탭에 Storage이벤트가 발생하면서 변경사항이 공유된다. 이러한 기능을 이용해 오리진이 같은 창끼리 메시지를 교환할 수 있다.
참고
자바스크립트 인포 cookie
javascript info localStorage와 sessionStorage