브라우저 저장소 (LocalStorage, SessionStorage, Cookie)

브라우저에 데이터를 저장하고 이용하는 Cookie와 Web Storage(LocalStorage, SessionStorage)의 특징은 다음과 같다.

 

1. Cookie

1-1. 특징

Web Storage API가 도입되기 전 대부분 웹브라우저는 쿠키(Cookie)라는 브라우저 저장소를 제공했다.

쿠키는 다음과 같은 특징을 갖는다.

• HTTP요청시 서버로 자동 전송된다. 따라서 로그인정보, 세션관리에 유용하다.
• 만료 날짜의 설정이 가능하며 지정하지않으면 브라우저가 닫힐때 제거된다.
• 도메인을 기준으로 데이터가 저장되지만 경로 단위도 지정할수 있어 조금더 세밀한 조작이 가능하다.
• 아주 오래된 브라우저에서도 대부분 호환이 가능하다.

1-2. 단점

여러가지 장점을 가진 브라우저 저장소로 기존 웹개발에서 오랜기간 사용되었지만 여러가지 단점, 한계점이 존재하였다.

• 적은 용량 : 4KB라는 매우 제한적인 용량을 제공한다.
• 성능 저하 : 쿠키는 HTTP 요청시마다 자동으로 서버에 전송된다. 쿠키의 양이 많아지면 불필요한 데이터까지 모두 주고받게되 네트워크 트래픽이 증가하고 성능이 저하될 수 있다.
• 보안 문제 : 기본적으로 서버와 클라이언트가 주고받는걸 전제로 한 데이터이기때문에 민감한 정보를 저장하는 데 적합하지 않다. 또한 HTTPonly, Secure, SameSite 등의 여러가지 보안설정이 중요하다.
• 복잡한 사용성 : 쿠키는 도메인이나 패스, 보안옵션, 만료날짜 등을 설정해줘야하기 때문에 간단한 데이터를 저장하고 관리할때도 사용이 복잡해질 수 있다.

여러가지 단점을 가지고 있어도 쿠키의 특성을 활용해 사용하는 경우는 아주 많다. 서버로 자동 전송되는 쿠키의 특성상 클라이언트의 상태를 서버가 지속적으로 추적하는데에는 유용하게 사용할 수 있기 때문이다. 예를들어 사용자의 로그인 상태를 유지하기위해 로그인 정보를 쿠키에 저장하여 서버에서 지속적으로 로그인 상태를 확인할 수 있도록 구현할 수 있다. 이때 보안문제 해결을 위해 암호화된 세션ID를 사용하거나 JWT같은 보안 토큰을 발급하기도 한다.

 

쿠키는 여전히 유용하게 사용되고 있지만 몇가지 단점을 보완하고 개발시 다양한 선택지를 제공해 조금더 유동적인 웹 개발이 가능하도록 HTML5에서는 Web Storage API가 도입되었다.

 

2. LocalStorage (Web Storage)

LocalStorage는 단어그대로 클라이언트의 로컬환경에 저장하여 반영구적 사용이 가능하도록 하는 데이터를 의미한다.

• 브라우저가 종료되도 데이터가 유지되어 사용자 데이터나 설정을 장기간 유지할 수 있다.
• 데이터의 만료날짜를 따로 설정할 수 없다.
• 도메인 단위로 데이터를 저장하여 동일 도메인에서는 모두 접근이 가능하다.
• 최대 저장 용량이 보통 5MB이상으로 cookie에 비해 매우 크다.
• JavaScript로만 접근이 가능하며 서버로 자동 전송되지 않는다.

 

3. SessionStorage (Web Storage)

SessionStorage는 세션 동안 데이터를 저장하는 것을 의미한다. 세션은 브라우저 탭 혹은 페이지 하나를 의미한다.

• 세션동안 데이터를 저장하므로 브라우저 탭이나 창이 닫히면 자동으로 삭제된다.
• LocalStorage처럼 도메인단위로 데이터가 저장되지만 세션단위로 관리되므로 같은 도메인이라도 다른 탭, 다른 창에서는 데이터를 각자 다르게 다룰 수 있다.
• 최대저장용량이 LocalStorage와 비슷하게 큰편이다.
• JavaScript로만 접근이 가능하며 서버로 자동 전송되지 않는다.

 

4. 비교

세가지 브라우저 저장소를 표로 비교해보면 다음과 같다.

 

브라우저 저장소는 각자 다른 특성과 장단점을 가지고 있다. 클라이언트 측에 저장하고자 하는 데이터의 용도에 따라 저장 방식을 알맞게 사용하면 된다.