브라우저 저장소 (Cookie, WebStorage,Indexed DB)

이예빈·2022년 4월 17일
0

클라이언트 단에 데이터를 저장해 두는 기술은 매우 다양하다.
어떤 브라우저가 얼마나 웹 데이터 저장소를 할당할지, 용량이 다 찼을 때 무엇을 지울지에 따라 그 과정이 심플하진 않다.

브라우저의 데이터 storage를 사용할 수 있도록 지원하는 기술엔 IndexedDB API, Cache API, Cookies, Web storage등이 있다.

IndexedDB API

IndexedDB API는 많은 양의 구조화된 데이터를 클라이언트 단에 저장하기 위한 low-level의 API이다.

이 API는 데이터를 찾을 때 고효율을 낼 수 있게 인덱스를 사용한다고 한다.
반면 뒤에 말할 Web Storage는 IndexedDB보단 작은양의 데이터를 저장하는데 유용하며 구조화된 데이터의 많은 양을 저장하기엔 다소 부족하다고 한다.

Web Storage

web storage는 key-value로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 web api중 하나이다.

web storage는 데이터의 지속성에 따라 sessionStorage와 localStorage 2가지 방식으로 나뉘어져있다.

sessionStorage

  • 각각의 출처(url)에 독립적인 저장공간을 세션이 유지되는 동안 제공한다.
  • 따라서, 브라우저 또는 탭이 닫히기 전까지만 데이터를 저장한다.
  • 데이터를 절대 서버로 전송하지 않는다. (쿠키와의 차이점!)
  • 저장공간이 cookie보다 크다. (최대 5MB)

localStorage

  • (일부러 삭제하지 않는 이상) 유효기간 없이 데이터를 저장할 수 있어서 브라우저를 닫았다 열어도 데이터가 남아있다.
  • 데이터를 지우려면 JavaScript를 코드로 삭제하거나 브라우저의 캐시 또는 localStorage데이터를 지워야한다.
  • 저장공간이 cookie, sessionStorage보다 크다.

cookie는 사이트를 방문하고 이용할 때 브라우저 측에 저장된다.
탈취가 쉽고 클라이언트 단에서 변경이 가능해서 중요하고 민감한 정보는 담아두지 않아야 한다.

  • 쿠키 사용 예 ) 로그인창의 아이디 자동완성, 공지창의 오늘하루 보지않기, 로그인 전 상태에서 본 상품목록

Session

세션을 사용하는 사이트를 이용하면 서버에서는 사용자를 구분하기 위해 기한이 짧은 임시키(세션아이디)를 브라우저에 전달해 쿠키로 저장한다.

사이트를 돌아다닐 때마다 http요청에 쿠키에 있는 이 세션아이디를 실어서 전송하면 서버측에선 그것을 보고 사용자를 인지하여 해당 사용자의 정보를 가공해서 응답으로 보내게 된다. ( sessionID를 이용한 인증 & 인가 )

번외) Cache

캐시란 개념은 웹 뿐만 아니라 컴퓨터의 메모리나 안드로이드 등 다양한 곳에서 쓰이는데, 거의 공통적인 의미로 가져오는데 비용이 드는 데이터를 한번 가져온 뒤엔 임시로 저장해두는 것을 의미한다.

참고

0개의 댓글