웹 스토리지

1. 개요

웹 스토리지는 웹 브라우저가 클라이언트 측에 데이터를 저장할 수 있도록 하는 기술로, 쿠키와 유사하지만 더 큰 저장 용량과 향상된 인터페이스를 제공한다. 웹 스토리지는 클라이언트 측 스크립트만 접근 가능하며, 로컬 스토리지와 세션 스토리지로 구분되어 유효 범위와 유효 기간이 다르다. 웹 스토리지는 키-값 쌍을 문자열 형태로 저장하며, 자바스크립트의 Storage API를 통해 사용된다. 브라우저별로 웹 스토리지 데이터를 저장하는 방식이 다르며, Indexed Database API, 웹 SQL 데이터베이스, HTTP 쿠키 등과 같은 기술과 유사한 기능을 수행한다.

2. 특징

웹 스토리지는 쿠키와 비교하여 다음과 같은 주요 특징을 갖는다.

* 목적: 쿠키는 서버와 클라이언트 간 통신을 주 목적으로 하지만, 웹 스토리지는 클라이언트 측 스크립팅에 의해서만 접근 가능하다.
* 저장 용량: 쿠키는 최대 4KB까지 저장 가능하지만, 웹 스토리지는 파이어폭스, 구글 크롬, 인터넷 익스플로러 등 주요 브라우저에서 5MB에서 10MB까지 더 큰 용량을 제공한다.
* 로컬 스토리지와 세션 스토리지: 웹 스토리지는 데이터의 유효 범위와 기간이 다른 로컬 스토리지와 세션 스토리지를 제공한다. 로컬 스토리지는 브라우저를 닫아도 데이터가 유지되는 반면, 세션 스토리지는 브라우저 창이나 탭이 닫히면 데이터가 삭제된다.
* 인터페이스 및 데이터 모델: 웹 스토리지는 키와 값 모두 문자열인 연관 배열데이터 모델을 사용하므로 쿠키보다 더 나은 프로그래밍 인터페이스를 제공한다.

2.1. 목적

쿠키는 서버와의 통신을 목적으로 하므로 모든 요청에 자동으로 추가되어 서버와 클라이언트 측 모두에서 접근 가능하다. 웹 스토리지는 클라이언트 측 스크립팅만 접근이 가능하다. 웹 스토리지의 데이터는 HTTP 요청마다 서버로 자동 전송되지 않으며, 웹 서버가 웹 스토리지에 직접 쓸 수도 없다. 하지만 클라이언트 측에서 이러한 효과를 실현하는 스크립트를 명시적으로 작성하는 것이 가능하며, 클라이언트 측에서는 서버와 원하는 대로 통신할 수 있는 세밀한 제어가 가능하다.

2.2. 저장 용량

웹 스토리지는 쿠키의 4킬로바이트보다 훨씬 더 큰 저장 용량을 제공한다.

2.3. 로컬 스토리지와 세션 스토리지

웹 스토리지는 범위와 수명이 다른 두 가지 저장 영역, 즉 로컬 스토리지와 세션 스토리지를 제공한다. 로컬 스토리지에 저장된 데이터는 동일 출처 정책에 정의된 대로 프로토콜, 호스트 이름 및 포트 번호의 조합인 출처별로 구분된다. 이 데이터는 이전에 데이터를 저장한 동일 출처의 페이지에서 로드된 모든 스크립트에서 사용할 수 있으며 브라우저가 닫힌 후에도 유지된다. 세션 스토리지는 출처별 및 인스턴스별(창 또는 탭별)이며 인스턴스의 수명으로 제한된다. 세션 스토리지는 동일한 웹 앱의 별도 인스턴스가 서로 간섭하지 않고 서로 다른 창에서 실행될 수 있도록 하기 위한 것이며, 이는 쿠키에서 잘 지원되지 않는 사용 사례이다.

2.4. 인터페이스 및 데이터 모델

웹 스토리지는 키와 값 모두 문자열인 연관 배열 데이터 모델을 사용하므로 쿠키보다 더 나은 프로그래밍 인터페이스를 제공한다.

웹 스토리지는 다음과 같은 특징을 가진다.

* 목적: 쿠키는 서버와의 통신을 주 목적으로 하여 모든 요청에 자동으로 추가되고 서버와 클라이언트 측 모두에서 접근 가능하다. 반면 웹 스토리지는 클라이언트 사이드 스크립팅만 접근이 가능하다. 웹 스토리지의 데이터는 HTTP 요청마다 서버로 자동 전송되지 않으며, 웹 서버가 웹 스토리지에 직접 쓸 수도 없다. 하지만 클라이언트 측에서 이러한 효과를 실현하는 스크립트를 명시적으로 작성하는 것이 가능하며, 클라이언트 측에서는 서버와 원하는 대로 통신할 수 있는 세밀한 제어가 가능하다.
* 저장 용량: 쿠키는 4KB로 제한되지만, 웹 스토리지는 훨씬 더 큰 용량을 제공한다.
* 모질라 파이어폭스: 오리진당 5MB
* 구글 크롬: 오리진당 10MB
* Internet Explorer: 스토리지 영역당 10MB
* 로컬 스토리지와 세션 스토리지: 웹 스토리지는 로컬 스토리지와 세션 스토리지라는 두 가지 다른 스토리지 영역을 제공하며, 각각 유효 범위(스코프)와 유효 기간이 다르다.
* 로컬 스토리지: 동일 출처 정책에 따라 동일한 프로토콜, 호스트 이름, 포트 번호 조합을 가지는 페이지에서 로드되는 모든 스크립트에서 데이터를 사용할 수 있으며, 브라우저가 닫힌 후에도 데이터가 유지된다. 따라서 웹 스토리지는 의 섹션 8.5 및 8.6에 설명된 쿠키의 약한 무결성 및 약한 기밀성과 같은 문제가 없다.
* 세션 스토리지: 오리진별, 인스턴스별(창별 또는 탭별) 유효 범위를 가지며, 인스턴스의 유효 기간으로 제한된다. 세션 스토리지는 동일한 웹 애플리케이션의 다른 인스턴스가 서로 간섭하지 않고 다른 창에서 실행될 수 있도록 설계되었으며, 이는 쿠키에서 충분히 지원되지 않는 사용 방식이다.

3. 사용법

웹 스토리지를 지원하는 브라우저는 window 레벨에서 `sessionStorage`와 `localStorage`라는 전역 객체를 선언한다. 다음 JavaScript 코드는 이러한 브라우저에서 웹 스토리지 동작을 트리거하는 데 사용할 수 있다.

```javascript
// 세션 기간 동안 브라우저에 값 저장
sessionStorage.setItem('key', 'value');

// 값 검색 (브라우저를 닫았다가 다시 열면 삭제됨)
alert(sessionStorage.getItem('key'));

// 세션 기간을 넘어 브라우저에 값 저장
localStorage.setItem('key', 'value');

// 값 검색 (브라우저를 닫았다가 다시 열어도 유지됨)
alert(localStorage.getItem('key'));
```

Storage API를 통해 문자열만 저장할 수 있다. 다른 데이터 유형을 저장하려고 하면 대부분의 브라우저에서 자동으로 문자열로 변환된다. 그러나 JSON으로 변환하면 JavaScript 객체를 효과적으로 저장할 수 있다.

```javascript
// 문자열 대신 객체 저장
localStorage.setItem('key', {name: 'value'});
alert(typeof localStorage.getItem('key')); // string

// 문자열 대신 정수 저장
localStorage.setItem('key', 1);
alert(typeof localStorage.getItem('key')); // string

// JSON을 사용하여 객체 저장
localStorage.setItem('key', JSON.stringify({name: 'value'}));
alert(JSON.parse(localStorage.getItem('key')).name); // value

4. 웹 스토리지 관리

웹 스토리지 객체의 저장은 현재 지원되는 모든 웹 브라우저에서 기본적으로 활성화되어 있으며, 브라우저 벤더마다 사용자가 웹 스토리지를 활성화 또는 비활성화하는 방법, 그리고 웹 스토리지의 "캐시"를 지우는 방법을 제공한다. 마찬가지로 웹 스토리지를 제어하는 방법은 서드 파티의 브라우저 확장 기능을 통해서도 가능하다. 브라우저별로 웹 스토리지 객체를 저장하는 방법은 다음과 같다.

5. 명칭

W3C 초안의 제목은 "웹 스토리지"이다. "DOM 스토리지"도 일반적으로 사용되는 명칭이었으나, 현재는 그 사용 빈도가 줄어들고 있다. 예를 들어, Mozilla 및 Microsoft 개발자 사이트의 "DOM 스토리지" 웹 문서는 "웹 스토리지" 문서로 대체되었다.

DOM 스토리지를 구성하는 "DOM"은 문자 그대로 문서 객체 모델을 의미하지 않는다. W3C에 따르면, "DOM이라는 용어는 웹 애플리케이션에서 스크립트에 제공되는 API 집합을 지칭하며, 실제 Document 객체의 존재를 반드시 의미하는 것은 아니다..."

6. 비슷한 기술

* Indexed Database API
* 웹 SQL 데이터베이스
* HTTP 쿠키
* Origin private file system (OPFS)

`localStorage`는 영구적인 키-값 쌍을 저장하는 데 자주 사용되지만, 반복 가능한 인덱싱 및 다른 성능 패턴과 같은 다양한 사용 사례를 가능하게 하기 위해 다른 API가 등장하였다.