브라우저 저장소에는 Local Storage, Session Storage, Cookie 등이 있음. 이들은 클라이언트 측에서 데이터를 저장하고 관리하는 방법을 제공함. 특징과 차이점을 알아보자.
Local Storage
- 웹 사이트에서 사용자 컴퓨터에 더 많은 양의 데이터를 로컬로 저장할 수 있도록 하는 브라우저 기능. 클라이언트 측에서 Key, Value 쌍으로 데이터 저장.
- 브라우저에 영구적으로 데이터가 저장되어 브라우저가 종료된 후에도 데이터가 손실되지 않음. 삭제하려면 사용자가 브라우저의 캐시를 지워야 함.
- 사용자의 로컬 저장소에 저장되므로 서버에 데이터를 전송하지 않아도 됨.
- 데이터 크기의 제한은 최신 브라우저에서 대략 5~10MB. 브라우저에따라 상이함.
- 지속적으로 필요한 데이터를 저장하기에 좋음. 예를 들어, 자동 로그인 등.
Session Storage
- Local Storage와 유사함.
- 하지만 Session Storage는 웹 페이지의 세션이 유지되는 동안에만 데이터를 저장함. 사용자가 브라우저를 닫거나 세션을 종료하면 데이터가 삭제됨.
- 잠시 동안 필요한 정보를 저장하기에 좋음. 예를 들어, 쇼핑몰 비로그인 장바구니 등.
Cookie
- 사용자가 방문하는 웹 사이트에 의해 사용자의 컴퓨터에 저장되는 작은 데이터 조각. 쿠키 또한 Key, Value 형태의 저장소.
- HTTP 헤더를 통해 브라우저와 서버 간 정보를 주고 받는 데이터 저장 방식. 이로 인해 상대적으로 보안성이 떨어질 수 있음. 텍스트 형식으로 저장됨. 웹 사이트가 생성한 정보를 브라우저에 저장한 다음, 이후 요청 시 다시 서버로 전송되어 사용됨.
- 만료 시간을 설정해 데이터 유효 기간을 정할 수 있음.
- 용량에 제한이 있으며 쿠키 당 약 4KB. 필요한 경우 더 많은 양의 데이터를 저장하기 위해 여러 개의 쿠키를 사용할 수 있음.
- 클라이언트 측에서만 액세스 할 수 있는 로컬, 세션 스토리지와 달리 쿠키는 서버 측과 클라이언트 측 모두 사용할 수 있기 때문에 주로 사용자 인증에 사용. 사용자 방문 페이지 트래킹 등.
정리
- 로컬 스토리지와 세션 스토리지는 웹 스토리지 API에 속해 있어 비슷한 용량의 한계를 가지고 있고, 데이터가 사용자의 로컬 저장소에 저장되므로 서버에 데이터를 전송하지 않음. 그러나 로컬 스토리지는 영구적으로 데이터를 저장하고, 세션 스토리지는 세션 동안에만 데이터를 저장함.
- 쿠키는 HTTP 헤더를 통해 데이터를 저장하여 서버에 전송되기 때문에 로컬 스토리지와 세션 스토리지보다 보안성이 떨어질 수 있음. 용량의 한계가 가장 작지만, 만료 시간을 설정할 수 있다는 장점이 있음.
- 쿠키의 단점을 보완해 HTML5에서 이러한 웹 스토리지라는 기술이 생겼다고 함.
reference
벨로그로 이사 중