[Web] 브라우저 저장소

브라우저 저장소에 대하여 알아보자

브라우저 저장소(Web Storage)란 HTML5부터 제공하는 기능으로 해당 도메인과 관련된 특정 데이터를 웹 브라우저에 저장할 수 있도록 한다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고, 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 쿠키와 마찬가지로 사이트 도메인 단위로 접근이 제한된다.

Local Storage

1. key/value 쌍으로 데이터를 저장한다.
   (위의 그림에서 utterances-session은 key에 해당하고 33d4f812…는 value에 해당한다.)
2. Javascript/HTML을 통해서만 데이터에 접근이 가능하다.
3. 만료 기간이 없어 직접 지울 때까지 데이터가 남아 있다.
4. 5MB의 저장 공간을 가진다.
5. Local Storage의 데이터는 API 호출에 담을 수 없어 서버에 전송이 불가능하다. 다시 말해 클라이언트에서만 저장한 데이터를 조회하는 것이 가능하다.
6. 데이터의 저장이 string 형식으로 제한된다.

Session Storage

1. key/value 쌍으로 데이터를 저장한다.
2. Javascript/HTML을 통해서만 데이터에 접근이 가능하다.
3. session 기간에만 데이터를 저장한다. 브라우저가 꺼지거나, 세션 기간이 만료되면 데이터는 소실된다.
4. 5MB ~ 10MB의 저장 공간을 가진다.
5. Session Storage의 데이터는 API 호출에 담을 수 없어 서버에 전송이 불가능하다. 다시 말해 클라이언트에서만 저장한 데이터를 조회하는 것이 가능하다.
6. 데이터의 저장이 string 형식으로 제한된다.

cookies

1. 쿠키는 이름, 값, 유효시간, 도메인, 경로로 이루어져 있다.
   (브라우저에 저장되는 키와 값이 들어있는 작은 데이터 파일로 server-side에서 사용되는 데이터를 주로 저장한다.)
2. 만료 기간을 명시할 수 있으며, 기간이 남았다면 브라우저가 종료되어도 유지된다.
3. 4KB 이하의 저장 공간을 가진다.
4. 사용자가 따로 요청하지 않더라도 브라우저 요청 시 request header를 넣어 서버로 자동으로 전송된다.

세선(session)
쿠키는 방문자의 정보를 브라우저에 저장하지만, 세션은 방문자의 정보를 브라우저가 아니라 웹 서버에 저장한다. 쿠키와 달리 세션은 사용자의 로그인 정보에 대한 보안을 한층 업그레이드 할 수 있기 때문에 웹 사이트에 방문하여 계속 접속을 유지할 때 이전 접속 정보를 이용할 수 있는 방법으로 많이 사용한다.

사용자의 정보를 서버에 두기 때문에 보안은 쿠기보다 좋을 수 있지만, 사용자가 많아질수록 서버 메모리를 많이 사용하게 된다. 따라서 동시 접속자가 많을 경우 서버에 과부하를 주게 되므로 성능 저하의 주요 원인이 된다.

세션도 쿠키처럼 만료 기간을 설정할 수 있지만, 쿠키와 달리 브라우저가 종료되면 만료 기간에 상관 없이 삭제된다는 특징을 가지고 있다. 쿠키는 서버에 요청시 세션보다 속도가 빠르다. 세션은 정보가 서버에 있기 때문에 비교적 속도가 느린 편이다.