웹 스토리지 (Web Storage)의 특성과 사용법

1. 웹 스토리지와 쿠키

웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다. 웹 스토리지의 최신 스펙은 https://www.w3.org/TR/webstorage/에서 확인할 수 있다.

웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다. 다음 항목에서는 로컬 스토리지와 세션 스토리지에 대한 각각의 특성에 대해 서술한다.

2. 로컬 스토리지 (Local Storage)

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다. 예를 들어, www.google.com에서 로컬 스토리지에 저장한 데이터를 www.ieeexplore.ieee.org에서 접근할 수 없는 것과 같다. 아래의 [코드 1]은 자바스크립트를 이용하여 로컬 스토리지에 접근한다.

localStorage.setItem('item1', 10);
localStorage.setItem('item2', 'new item');
localStorage.setItem('item3', 0.543534);
 
console.log(localStorage.getItem('item1'));
console.log(localStorage.getItem('item2'));
console.log(localStorage.getItem('item3'));

[코드 1] 자바스크립트를 이용한 로컬 스토리지 접근

[그림 1]은 [코드 1]을 실행한 후 로컬 스토리지에 저장된 데이터를 나타낸다. Chrome에서는 F12를 누른 후 Resources 탭을 클릭하면 웹 스토리지에 저장된 데이터를 볼 수 있다.

[그림 1] 로컬 스토리지에 저장된 데이터

[그림 2]는 로컬 스토리지에서 데이터를 읽어서 콘솔창에 출력한 것이다 ([코드 1]의 5~7번째 줄).

[그림 2] 콘솔창에 로컬 스토리지에 저장된 데이터를 출력한 결과

3. 세션 스토리지(Session Storage)

세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것이다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다. 아래의 [코드 2]는 자바스크립트를 이용하여 세션 스토리지에 접근한다. 세션 스토로리지에서 데이터를 읽는 방법은 로컬 스토리지에서 데이터를 읽는 방법과 동일하다.

 localStorage.setItem('item1', 10);
 localStorage.setItem('item2', 'new item');
 localStorage.setItem('item3', 0.543534);

[코드 2] 자바스크립트를 이용한 세션 스토리지 접근

[그림 3]은 [코드 2]를 통해 세션 스토리지에 데이터를 저장한 결과를 나타낸다.

[그림 3] 세션 스토리지에 저장된 데이터