Javascript-브라우저 저장소

쿠키, 세션, 캐시

쿠키

• 쿠키는 사용자가 사이트를 방문하고 이용할 때 브라우저에 저장되는 내용들이다.
• 사용자가 임의로 고치거나 지울 수 있다.
• 암호화가 없어 정보 도난의 큰 위험이 있다.
• key-value 형태의 만료 기한이 있다.
• 사용 예) 아이디 자동완성, 로그인 없이 장바구니에 물건 담기, 한 서비스 내에서 페이지 돌아다니기, 공지 메시지 하루 안 보기

사용자의 편의를 위하되, 지워지거나 조작되거나 도둑질당해도 큰일은 없을 것들

로그인하면 한 사이트 내에서는 다시 로그인할 필요 없이 페이지를 방문할 수 있다. 쿠키를 삭제하면 로그인 정보가 삭제된다.

document.cookie로 확인할 수 있다.

공백은 인코딩 처리를 해줘야 한다.

세션

1. 서버의 세션에서 브라우저에 기한이 짧은 임시 키를 제공해주면, 브라우저에서는 이것을 쿠키에 저장한다.
2. 브라우저에서 서버에 요청할 때, http 요청에 이 키를 실어서 전송한다.
3. 서버에서 사용자인지 판별한 후, 브라우저로 가공된 데이터를 제공한다.

서버가 직접 관리해야 하는 중요한 정보

캐시

가져오는 데 비용이 드는 것들을 한 번 가져온 뒤에 브라우저나 중간 역할을 하는 서버에 임시로 저장해둔다.

스토리지

• 만료 기한이 있는 쿠키의 단점을 보완하였다.
• 네트워크 요청 시 서버로 전송되지 않는다.
• 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 조작은 모두 자바스크립트에서 이루어진다.
• 프로토콜과 서브 도메인이 다르면 접근할 수 없다.
• key와 value는 string이어야 한다.
• 쿠키에 비해 용량이 크다 (5MB. 브라우저마다 상이)

localStorage

• 오리진(domain/port/protocol)만 같다면 모든 탭과 창에서 공유된다.
• 브라우저가 껐다 다시 켜지거나 OS가 재시작해도 유지된다.

localStorage에 값을 저장해둔 후, 브라우저를 껐다 켜도 값이 유지된다.

sessionStorage

• 현재 보이는 탭 안에서만 유지된다.
• 브라우저가 꺼지면 삭제된다.
• 새로 고침할 때는 유지된다.

sessionStorage에 값을 저장해둔 후, 새로 고침할 때는 유지되지만, 브라우저를 껐다 켜면 보이지 않는다.

참고 자료

• 얄팍한 코딩사전's youtube
• 모던 자바스크립트