쿠키, 세션, 로컬스토리지를 왜 사용하는지부터 알아보자.
로그인을 예로 들자면,
사용자가 브라우저에 아이디와 비밀번호를 입력하면 서버에게 인증요청을 보내고 서버가 클라이언트에게 요청에 대한 응답을 보낸다. 이때 HTTP 프로토콜의 특성상 통신이 끝나면 상태 정보를 유지하지 않는다.
즉, 클라이언트의 로그인 정보나 브라우저에서 입력한 값들이 페이지를 이동할 때마다 초기화가 된다. 이러한 문제를 해결하기 위해 데이터 저장에 사용하는 것이 쿠키, 세션, 로컬스토리지이다.
그리고 로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법이 쿠키와 스토리지이다.
그리고 이 둘은 다른 목적을 갖고 있기 때문에 차이를 알고 적절한 용도에 맞춰 사용해야 한다.
쿠키
HTTP 요청시 사용자의 쿠키 정보가 서버로 전달되어 사용자를 구별한다. (예를 들어 웹페이지에서 ID:123이라는 쿠키를 저장해두면, 다음에 유저가 접속했을 때 서버가 그 ID를 읽어 유저가 123이라는 것을 확인)
로컬스토리지 (웹스토리지의 종류)
HTML5 에서 표준으로 지정되어있다. 쿠키가 HTML Header에서 서버와 통신을 한다면 로컬스토리지는 서버와 통신을 하지 않고 클라이언트에 데이터를 저장한다.
쿠키와 로컬스토리지 차이
서버의 사용 유무
쿠키는 서버측과 클라이언트측 양쪽에 쿠키 데이터를 사용하는 api가 존재한다.
로컬스토리지는 로컬 환경에서만 컨트롤된다.
이 둘의 차이는 서버쪽을 사용하냐 안 하냐이다.
저장공간의 크키
쿠키의 저장공간은 4kb이고 로컬스토리지의 저장공간은 5mb이다. 저장할 내용이 많은 경우 로컬스토리지를 사용하는 것이 효과적이다.
기간 설정의 여부
쿠키는 기본적으로 만료일을 함께 설정한다. 때문에 사용자가 데이터를 삭제하지 않아도 일정 시간이 지나면 저장된 데이터를 사용할 수 없게 된다.
로컬스토리지는 사용자가 임의로 삭제하지 않는 경우 삭제되지 않는다. 때문에 보안에 민감한 데이터보다는 단순한 보관 용도의 데이터가 적합하다.
디바이스 및 브라우저 호환성
쿠키는 대부분의 디바이스, 브라우저에서 호환이 된다.
로컬스토리지는 html5와 같은 최신 브라우저에서만 사용이 가능하다.
쿠키와 로컬스토리지 사용처
로그인창의 아이디를 자동 완성
팝업창 하루 안 보기
로그인 안 한 상태에서 물건을 장바구니에 담기
즉, 사용자의 편의를 위해되 지워지거나 해킹을 당해도 큰 일은 없을 수준의 정보를 브라우저에 저장하는데 사용한다.
로컬스토리지와 세션스토리지는 비교적 중요하지 않은 데이터를 유지할 때 적합하다.
ex. 게임 점수, 환경 설정
브라우저 내에서 쉽게 읽거나 변경할 수 있어서 보안 관련 데이터를 저장해서는 안 된다.
세션
나의 아이디와 비밀번호
서비스 제공자가 직접 관리해야할 정보들은 세션으로 서버 안에서 다뤄진다.
웹 개발자들은 사이트를 만들 때 이 정보는 '쿠키에 저장할지' '세션에 저장할지' 용도에 맞게 판단을 해야 한다. 쿠키에 저장하면 안 될 민감한 정보들이 있고, 그렇다고 세션을 남발하면 접속자가 많을 때 서버에 부하가 걸리기 때문이다.
캐시
가져오는데 비용이 드는 데이터를 한 번 가져온 뒤에는 임시로 저장해둔다.
용량이 큰 이미지의 경우 사용자가 여러 번 방문할 법한 사이트에서는 사용자의 컴퓨터, 또는 중간 역할을 하는 서버에 저장해두는 것이다.
