[javascript] Web Storage 웹 스토리지와 쿠키의 개념과 사용법

웹 스토리지 & 쿠키

웹 스토리지란 클라이언트 측에서 데이터를 저장할 수 있도록 지원하는 html5의 새로운 기능으로 쿠키와 비슷한 기능을 한다. 다만 쿠기보다 웹 스토리지가 큰 용량을 가지며 전송 갯수의 제한이 없고 서버로 정보를 보내는 것이 아니라 클라이언트 측에 저장하는 것이기 때문에 트래픽을 낮출 수 있다는 장점이 있다.

웹 스토리지에는 Session Storage와 Local Storage가 있으며 서로 다른 특성을 가지고 있다. 둘의 공통점은 하나의 도메인마다 스토리지가 생성된다는 점이다.

Local Storage

로컬 스토리지는 브라우저에 데이터를 반영구적으로 저장한다. 즉, 브라우저를 닫았다 다시 열거나 새 탭에서 정보를 저장해도 그 정보가 남아있기 때문에 쿠키를 대신하기에 적합하다.

로컬 스토리지에 정보를 저장하고 사용하는 법은 다음과 같다.

localStorage.setItem('key', 10) // key와 value값으로 저장
console.log(localStorage.getItem('key')); //key를 통해 찾음

Session Storage

세션 스토리지는 각 정보를 세션마다 개별적으로 저장한다. 즉 같은 페이지를 여러개의 탭으로 실행하면 각 탭마다 각각 개별적으로 다른 정보가 저장된다. 각 탭의세션 스토리지의 데이터에 서로 접근하는 것을 불가능하다. 그리고 세션이 종료되면 데이터는 사라진다. (브라우저를 닫았다 다시 열 경우)

세션 스토리지에 정보를 저장하고 사용하는 법은 로컬 스토리지와 매우 유사하다.

sessionStorage.setItem('key', 10);
console.log(sessionStorage.getItem('key')); 

쿠키(보충필요)

쿠키는 클라이언트 로컬에 저장되는 데이터로 보통 세션 관리, 사용자 맞춤, 사용자 추척을 위해 사용된다. Response Header의 Set-Cookie속성을 통해 클라이언트에 쿠키를 만들 수 있다.

쿠키의 문법은 다음과 같다.

Set-Cookie: <cookie-name>=<cookie-value>

이 서버 헤더를 통해 클라이언트에 다음 쿠키를 저장하라고 요청 할 수 있다.

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]

다음과 같이 응답이 오면 서버로부터 전송되는 요청과 함께 브라우저는 쿠키 헤더를 이용하여 서버측에 이전에 저장한 쿠키들을 회신하게 된다.

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry