브라우저 저장소

브라우저 저장소 

• 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소.
• 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장

웹 스토리지 ( Web Storage)

웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소이며, 웹 스토리지는 
로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage )로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage )는 브라우저를 종료해도 데이터를 보관(영구성)합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다.

세션 스토리지 ( Session Storage )는 브라우저가 종료되면 데이터가 삭제(비영구성)됩니다. 도메인이 같더라도 브라우저가 다르면 ( 탭 브라우저, 다른 브라우저 ) 브라우저 컨택스트가 다르기 때문에 각각의 세션 스토리지가 형성되어 
데이터 공유가 되지 않습니다.

 

	로컬 스토리지	세션 스토리지
데이터 유지	브라우저 종료시 보관	브라우저 종료시 삭제
데이터 범위	동일한 도메인 전역 공유	브라우저간 공유 안됨

 

쿠키 ( Cookie )

쿠키는 애초에 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어졌습니다. 예를 들어 우리가 HTTP 요청을 보낼 때 서버에 특정 요청을 보내면 서버는 요청 자체만으로는 이 요청이 누가 보낸 것인지 알 수 없습니다. 이때 우리는 쿠키에 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 요청자를 파악합니다. 쿠키는 4KB의 용량 제한을 가지고 있으며 한 사이트당 20개의 쿠키를 가질 수 있습니다. 또한 쿠키는 만료기한을 지정할 수 있습니다.
만료기한을 설정하지 않으면 세션쿠키, 설정하면 지속적 쿠키로 간주됩니다.
세션쿠키의 경우 메모리에 저장이 되어 브라우저나, 탭이 닫히면 삭제됩니다.
반대로 지속적 쿠키의 경우 디스크에 저장되어 임의로 삭제하거나, 만료일이 도래하기 전까지는 데이터가 저장됩니다. web storage의 경우에는 만료기간의 설정이 없습니다.
쿠키는 서버와의 통신을 목적으로 만들어졌기 때문에 더 주의해야 됩니다. 쿠키에 사용량이 많다면 그만큼 네트워크 트래픽이 증가하게 됩니다.

expires와 max-age

expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다. 이런 쿠키를 "세션 쿠키(session cookie)"라고 부릅니다.

expires 나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않습니다.

• expires=Tue, 19 Jan 2038 03:14:07 GMT

브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제합니다.

쿠키의 유효 일자는 반드시 GMT(Greenwich Mean Time) 포맷으로 설정해야 합니다. date.toUTCString을 사용하면 해당 포맷으로 쉽게 변경할 수 있습니다. 아래는 유효 기간이 하루인 쿠키를 만드는 예시입니다.

// 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

expires 옵션값을 과거로 지정하면 쿠키는 삭제됩니다.

• max-age=3600

max-age는 expires 옵션의 대안으로, 쿠키 만료 기간을 설정할 수 있게 해줍니다. 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정합니다.

0이나 음수값을 설정하면 쿠키는 바로 삭제됩니다.

// 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "user=John; max-age=3600";

// 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함
document.cookie = "user=John; max-age=0";

출처:https://ko.javascript.info/cookie#ref-829

 

 

쿠키의 목적

1. 세션 관리 : 서버가 알아야 될 정보 ( 로그인 및 사용자 정보, 접속시간 )
2. 개인화 : 사용자에 맞는 페이지 제공
3. 트래킹 : 사용자 행동 및 패턴 분석

 

웹 스토리지와 쿠키의 차이점

• 웹사이트에서 cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송됩니다. 이는 불필요한 트래픽을 발생시킬 수 있습니다. 반대로 web storage는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않습니다.
• 단순한 문자열을 넘어서 web storage는 객체 정보를 저장할 수 있습니다. 문자열 기반 데이터 이외에 체계적으로 구조화된 객체를 저장할 수 있는 web storage는 개발 편의성적인 측면으로 cookie보다 편리하다고 할 수 있습니다. 각 브라우저별로 지원여부를 확인해야 합니다.
• web storage는 용량의 제한이 없습니다. cookie의 경우에는 한 개의 쿠키당 약 4kb로 제한되어 있고, 총개수는 300개, 하나의 도메인당 20개로 제한이 되어있습니다. web storage경우에는 이러한 제한이 없습니다.
• 쿠키는 만료일자를 설정하지 않으면 세션쿠키, 설정하면 지속적 쿠키로 간주됩니다. 세션쿠키의 경우 메모리에 저장이 되어 브라우저나, 탭이 닫히면 삭제됩니다. 반대로 지속적 쿠키의 경우 디스크에 저장되어 임의로 삭제하거나, 만료일이 도래하기 전까지는 데이터가 저장됩니다. web storage의 경우에는 만료기간의 설정이 없습니다.

 

부트캠프에서 프로젝트를 진행하면서 로컬 스토리지 ( Local Storage )를 사용해서 로그인을 구현했었는데 정보를 지우기 위해서 세션 스토리지 ( Session Storage )로 구현하는 것도 시도를 해보아야겠다. 또 구현을 하면서

웹 스토리지 ( Web Storage)에 토큰이나, 유저의 닉네임  등 유저정보를 넣는 경우가 있었는데 이런 정보를 넣는 것은
위험하지 않을까? 하는 생각이 들었다. 다른 방안으로 구현하는 방안도 찾아보며 실제 현업에서는 어떻게 로그인을 구현하는지 알아보고 싶다.

 

정리 : 웹에서 데이터를 클라이언트에 저장할 수 있는 방법은 Cookie와 Web Storage가 있습니다.
HTTP의 무상태성이라는(stateless) 성질 때문에 Cookie는 생성된 이후부터 모든 웹 요청의 헤더에 담겨 서버로 전송하며

 (통신이 끝나면 상태정보를 저장하지 않는 무상태성 때문에 정보 저장 및 사용자를 식별하기 위해서는 매번 전송해야 함 )
Cookie는 만료일의 설정 여부에 따라 지속적쿠키, 세션쿠키로 나뉘어 간주됩니다.
지속적 쿠키의 경우에는 설정된 만료일에 도래하거나, 임의로 삭제해야 데이터가 삭제되고.
세션쿠키의 경우에는 브라우저를 종료할 경우 삭제됩니다.

 

Web Storage는 정보를 서버로 전송하지 않으며 용량의 제한이 없고
단순문자열을 넘어 객체정보를 저장할 수 있으며 Local Storage와Session Storage로 구성되어 있습니다.
Local Storage는 임의로 삭제하지 않는 한 영구적으로 보관이 가능하며 

도메인별로 생성되기 때문에 도메인이 같으면 공유가 가능합니다.
Session Storage는 브라우저를 종료하면 삭제되며 Session Storage는 도메인이 같아도 브라우저가 다르거나, 탭이 다르면 다른 저장소이므로 서로 침범할 수 없습니다.

출처: https://ryuhojin.tistory.com/10

 

https://velog.io/@limuubin/%EB% B8% 8C% EB% 9D% BC% EC% 9A% B0% EC% A0%80% EC% A0%80% EC% 9E% A5% EC%86%8C-%EB% B9%84% EA% B5%90% ED%95%98% EA% B8% B0