Web Storage

HTML5에 웹 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스팩이 포함되어 있습니다.

Web Storage는 key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴입니다.

그리고 영구 저장소(Local Storage)와 임시 저장소(Session Storage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다.

Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이지만 쿠키의 단점을 보완하여 도입되었습니다.

Web Storage(Cookie의 차이)

1. 쿠키는 매번 서버로 전송됩니다.

   웹 사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송됩니다. Web Storage는 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 하지 않습니다. 이는 네트워크 트레픽 비용을 줄여줍니다.

2. 단순 문자열을 넘어 객체정보(스크립트)를 저장할 수 있습니다.

   문자열 기반 데이터 이외의 체계적으로 구조화된 객체를 저장할 수 있다는 것은 개발 편의성에 큰 장점이 됩니다. 다만, 브라우저의 지원 여부를 확인해봐야 합니다.

3. 용량의 제한이 없습니다.

   쿠키는 개수와 용량의 제한이 있는 반면 Web Storage는 제한이 없습니다. 하나의 사이트에서 저장할 수 있는 최대 쿠키수는 20개, 크기는 4KB로 제한됩니다. (쿠키도 하위키를 이용하면 제한을 일부 해소할 수 있지만 쿠키 사용시 제한으로 까지 데이터를 저장할 일은 거의 없습니다.)

4. 영구 데이터 저장이 가능합니다.

   쿠키는 만료일자를 지정하게 되어 있습니다. 만약 만료일자를 지정하지 않으면 세션 쿠키가 됩니다. (이 만료일자를 멀게 설정할수도 있습니다.)

LocalStorage와 SessionStorage

Web Storage는 데이터의 지속성과 관련하여 두 가지 용도의 저장소를 제공합니다.

우선 기본적으로 Web Storage는 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한됩니다. 예를 들어, A도메인에서 저장한 데이터는 B도메인에서 조회할 수 없습니다. (이는 데이터의 보안측면에서 당연한 일입니다.)

LocalStorage

• 웹 브라우저에 데이터를 저장하여 사용하는 객체
• 각 데이터 항목은 키(key)와 값(value)의 쌍으로 구성

특징

1. 사용자 세션 데이터 유지 가능
2. 브라우저를 닫았다 열거나 탭을 여러개 열어도 공유됨
3. 명시적으로 삭제될 때까지 지속됨
4. 변경 사항은 저장되어 현재 및 향후 사이트 방문시 사용가능

// key와 value 형태로 localStorage에 저장됩니다.
localStorage.setItem('name', 'eunjee');

// key를 통해 매핑되어있는 값을 찾을 수 있습니다.
localStorage.getItem('name');

// localStorage 객체에서 'name'이라는 키(key)에 해당하는 값을 삭제
// 키와 해당하는 값(value)를 모두 삭제합니다.
localStorage.removeItem('name');

// localStorage를 다 삭제합니다.
localStorage.clear();

SessionStorage

• 웹 브라우저의 세션(session) 기간 동안 데이터를 저장하는데 사용하는 객체
• 각 데이터 항목은 키(key)와 값(value)의 쌍으로 구성

특징

1. 브라우저 세션 기간 동안만 사용할 수 있으며 탭이나 창을 닫을 때 삭제됨
2. 새로 고침을 해도 유지됨
3. 변경된 사항은 현재 페이지에서 닫힐 때까지 저장되어 사용가능
4. 창이 닫히면 저장된 데이터가 삭제됨

// key와 value 형태로 sessionStorage에 저장합니다.
sessionStorage.setItem('name', 'eunjee');

// key를 통해 매핑되어있는 값을 찾을 수 있습니다.
sessionStorage.getItem('name');

// sessionStorage 객체에서 'name'이라는 키(key)에 해당하는 값을 삭제
// 키와 해당하는 값(value)를 모두 삭제합니다.
sessionStorage.removeItem('name');

// sessionStorage를 다 삭제합니다.
sessionStorage.clear();