브라우저 저장소 정리

브라우저 저장소

웹 스토리지

웹 데이터를 클라이언트에 저장하기 위해 만들어진 키=값 형식의 저장소

개발자도구 > 애플리케이션에서 확인 가능

 

로컬 스토리지

로컬 스토리지는 브라우저를 종료해도 도메인만 같으면 데이터를 영구적으로 보관한다. 즉 전역적으로 데이터가 공유된다.

window.localStorage

 

세션 스토리지

브라우저가 종료되면 데이터가 삭제되며 도메인이 같아도 탭이 다르거나 브라우저가 달라지면 데이터가 공유되지 않는다. 즉 브라우저 컨텍스트가 다르기에 각각의 세션 스토리지가 생성된다.

window.sessionStorage

 

쿠키와 다르게 웹 스토리지는 서버에 전송되지 않기에 서버에 부담이 가지 않고, 쿠키보다 용량이 넉넉한 편이다. 그리고 필요한 경우에만 사용되는 것이므로 자동 전송의 위험성이 없다. 무엇보다도 Origin마다 접근이 제한되기 때문에 다른 Origin 이 요청하더라도 해당 값을 사용할 수 없다.

주의할 점은 키와 값이 문자열만 들어가야 한다는 점이다. Object를 문자열로 직렬화하지 않는다면 [object object]처럼 값을 알 수 없는 형식으로 들어가진다.

• .getItem(키) => 값
• .setItem(키, 값)
• .removeItem(키)

 

---

 

쿠키

서버와 클라이언트 간 데이터 교환을 위해 만들어진 키=값 형식의 저장소

클라이언트에서 서버로 HTTP 요청을 보낼 때 서버측에선 요청 자체만으론 누가 보낸 요청인지 알 수가 없기 때문에 쿠키에 로그인 정보 등을 담아서 보낼 때 사용한다. 한 사이트에 20개까지 쿠키를 가질 수 있으며, 하나의 쿠키에는 4kb의 용량 제한이 있다. 매 요청마다 쿠키가 담겨 서버로 요청이 되므로 쓸데없는 값들이 있다면 네트워크 트래픽이 증가하게 된다.

• 세션 관리: 로그인 정보 확인, 사용자별 페이지 처리
• 트래킹: 사용자 행동 분석