Web Storage(Local Storage, Session Storage) 와 Cookie

Jung Hong·2022년 12월 3일

웹사이트에 최적화된 로그인 기능을 구현하기 위해서, 토큰들을 어떻게, 어디에 저장할 것인지, access token 과 refresh token을 어떻게 관리할지를 결정할때, 웹스토리지와 쿠키에 대한 이해가 필요하다.

웹스토리지(Web Storage)는?

특정 데이터를 서버가 아닌 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능(HTML5 이후부터 제공)
Key - Value 쌍으로 데이터를 저장(-> Key를 기준으로 데이터(Value)를 조회한다
웹 스토리지는 도메인 단위의 저장소(-> Dev Tools의 어플리케이션 텝에서 확인 가능)
: 즉, 특정 도메인에서 생성된 웹스로리지 데이터는 다른 도메인에서 조회할 수 없다(보안에 유리)

1) 세션 스토리지(Session Storage): 임시 저장소
: 브라우저가 열려있는 한 페이지를 Reload 하더라도 유지되며, 브라우저를 닫으면 삭제된다
: 브라우저 단위 --> 브라우저가 다르면 서로 다른 세션

2) 로컬 스토리지(Local Storage): 영구 저장소
: 브라우저를 닫았다가 열어도 유지됨

-> 자동 로그인 구현 시, 쿠키를 세션이 아닌 로컬 스토리지에 저장하는 이유.

HTML5가 탄생하면서, 기존에 사용하던 Cookie 저장소의 단점(로그인 구현에서는 단점이 장점으로 작용하기도...)들을 극복할 수 있게 되었다.

쿠키는 매번 서버로 전송된다
: 웹 요청(API 요청을 보낼때) 쿠키 정보를 포함시킨다 --> 쿠키 사이즈가 커진다면 트래픽 발생의 원인이 될 수 있음

-> Web Storage는 데이터를 클라이언트에서 관리하고, 서버에서는 확인할 수 없음(로그인 기능에서 토큰 등은, 로컬 스토리지에서 꺼내서 헤더에 넣어서 전송)

쿠키는 4KB의 데이터 용량 제한이 있음, 단순 문자열만 저장가능
: Web Storage는 단순 문자열과 구조화된 객체를 저장할 수 있다(개발자 모드에서 객체형식으로 저장된 데이터를 확인할 수 있다)
: 쿠키는 클라이언트에 최대 300개(도메인당 최대 20)의 쿠키를 저장할 수 있음
: Web Storage는 용량의 제한이 없음
쿠키는 일정 시간이 지나면 만료된다(로그인 토큰 값 저장 시, 만료일자 지정 가능)
: 만료일자를 지정하지 않으면 '세션 쿠키'로 생성
(세션 쿠키(Session Cookie)란? 웹 브라우저가 살아있는 동안의 생명주기를 갖으며, 일반적으로 웹브라우저를 닫으면 삭제됨)
(<-> 영구 쿠키(Persistant Cookie): 쿠키의 만료일자 설정을 먼 미래로 한다면, 수동으로 삭제하지 않으면 영구적 저장이 가능)
: Web Storage(Local Storage)는 영구적으로 데이터를 저장할 수 있음

쿠키는 방문자의 정보를 방문자의 컴퓨터 메모리에 저장
세션은 웹 서버가 세션 아이디(클라이언트가 Request를 보내면 해당 서버의 엔진이 클라이언트 부여하는 유일한 ID, 서버 내에서 자체적으로 만료시간을 지정 가능, 단 브라우저를 닫으면 삭제됨) 파일을 만들고 서비스가 돌아가고 있는 서버에 저장
세션은 사용자의 로그인 정보에 대한 보안을 한층 업그레이드 (JWT를 통해서 극복할 수 있음)
이전의 접속정보를 이용할 수 있는 방법으로 많이 사용됨 --> 세션ID가 늘어나면, 즉 유저가 늘어나면, 서버에 부하 발생
세션도 만료일 설정 가능 --> 브라우저가 종료되면 만료시간에 상관없이 삭제
쿠키는 서버에 요청시 세션보다 속도 빠름 --> 쿠키는 로컬에 저장되지만 세션은 서버에 저장되기 때문

쿠키/세션과 캐시의 차이점은?
: 캐시는 이미지, css, js 파일 등을 브라우저나 서버 앞 단에 저장
: 캐시 저장은 브라우저에 저장되는 것이기 때문에, 서버에서 변경이 발생하더라도 적용이 안됨