브라우저 저장소의 차이점(Local storage, Session storage, cookie)

브라우저 저장소의 종류

브라우저 저장소의 종류는 Cookie, WebStorage 두가지로 나눠지고, WebStorage는 LocalStorage와 SessionStorage로 이루어져 있다.

웹 스토리지(Web Storage)
데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소.
HTML5에 포함되어 있는 스펙으로 기존의 저장소로 사용되었던 Cookie의 몇가지 단점을 개선한 스펙이다.(키-밸류 페어로 저장됨, 매번 서버로 전송되지 않음)

쿠키(Cookie)
서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소

 

브라우저 저장소의 차이점

 

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

1) 쿠키

• 목적 : 쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어짐. cookie를 설정하면 이후 모든 요청은 쿠키정보를 포함하여 서버로 전송 -> 서버와의 통신을 목적으로 만들어 졌기 때문에 쿠키에 쓸데없는 값이 많다면 그만큼 네트워크 트래픽이 증가
• 용량 제한 : 한개의 쿠키당 약 4kb로 제한되어 있고, 총 개수는 300개, 하나의 도메인당 20개로 제한
• 만료 일자 : 쿠키는 만료일자를 설정하지 않으면 세션쿠키, 설정하면 지속적쿠키로 간주 됨(세션쿠키의 경우 메모리에 저장 되어 브라우저나, 탭이 닫히면 삭제, 지속적쿠키의 경우 디스크에 저장되어 만료일 전까지 영구 저장)

 

2) 웹 스토리지

• 스토리지는 데이터가 클라이언트단에 저장만 되어있을 뿐 서버로의 전송은 이루어지지 않음
• 용량 제한이 쿠키에 비해 넉넉하고, 만료일자를 따로 정하지 않음
• 오리진 단위로 접근이 제한되는 특성 덕분에 외부에서 값을 꺼내 쓸수 없다.(CSRF)
• 스토리지는 단순한 문자열을 넘어서 객체 정보를 저장할 수 있으므로 쿠키에 비해 개발 편의성이 증가

 

2. Local Storage와 Session Storage의 차이점

데이터의 유지와 범위에서 차이가 있다.

1) 로컬 스토리지 ( Local Storage ) - 영구 / 브라우저간 공유

• 브라우저를 종료해도 데이터를 영구적으로 보관
• 도메인만 같으면 모든 브라우저 간에 전역적으로 데이터가 공유되는 특성

2) 세션 스토리지 ( Session Storage )  - 비영구 / 브라우저간 공유x

• 세션 스토리지에 저장된 데이터는 브라우저 *세션이 유지되는 동안만 존재하기 때문에 브라우저가 종료되면 데이터가 삭제(비영구성).
• 도메인이 같더라도 브라우저가 다르면 각각의 세션 스토리지가 형성되어 데이터 공유가 되지 않음

*세션 : 세션이란 사용자가 웹 브라우저를 열고 해당 브라우저를 종료할 때까지의 기간