세션 스토리지(Session Storage)
- 데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.휘발성 데이터를 저장할 때 사용한다.
- session 기간에만 데이터를 저장한다. 즉, browser(또는 tab)이 꺼진다면 데이터는 소실된다. (보안 측면에서 유리)
- 5-10 MB의 저장 공간을 가진다
- Session Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회가능)
- window.sessionStorage 객체
- 세션 쿠키와 달리 탭/윈도우 단위로 세션 스토리지가 생성된다.
- 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 동작한다.
- 잠시 동안 필요한 정보를 저장하기에 좋다. (ex. 일회성 로그인, 입력 폼 저장 등)
로컬 스토리지(Local Storage)
- 데이터의 만료기간이 없으며 사용자가 데이터를 지우지 않은 한 영구적으로 보존된다.
- 사이트 재 방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.
- 사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용한다.
- key/value 의 pair로 데이터를 저장한다.
- Javascript/HTML 을 통해서만 데이터에 접근 가능하다.
- no expiration date. 직접 지울때까지 남아있다.
- 5MB의 저장 공간을 가진다
- Local Storage의 데이터는 api 호출에 담을 수 없어 서버에 전송이 불가능하다. (= client 에서만 저장 데이터 조회 가능)
- string data로 저장이 제한된다. 따라서 용이하게 사용하려면 직렬화(String화) 가 필요하다
쿠키(Cookie)
- 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다.
- 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
- 재요청 시 저장된 값을 참조, 재사용 한다.
- 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
- 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능하다.
- 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야하며 일정시간 동안 데이터를 저장할 수 있다.
- 같은 도메인 상에서 쿠키의 값은 공유된다.
- 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.
- expiration date는 각 데이터마다 설정된 기간동안으로 지정된다.
- Server-Side에서 사용되는 데이터를 주로 저장한다.
매 api 요청마다 함께 전송된다.(header에 Access-Control-Allow-Credentials를 true로 설정 시) - HttpOnly flag를 통해 각 Cookie를 client-side에서의 접근으로부터 보호할 수 있다. (document.cookie 로 직접 실험가능)
요약
데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것
- 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.
- 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다.
- 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form)
- 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다.
- 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다.
- 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다.
- 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다.
반반무마니