위키원
웹스토리지
웹스토리지(Web Storage, 이전 명칭: DOM 스토리지)는 웹브라우저에서 제공하는 표준 JavaScript API이다. 이는 웹사이트가 사용자의 기기에 지속적인 데이터를 저장할 수 있게 해주며, 쿠키와 유사하지만 훨씬 더 큰 저장 용량을 제공하고 HTTP 헤더에 정보가 포함되지 않는다는 차이점이 있다. 웹스토리지는 로컬 스토리지(local storage)와 세션 스토리지(session storage)라는 두 가지 주요 유형이 있으며, 각각 영구쿠키와 세션쿠키와 유사한 방식으로 동작한다. 웹스토리지는 W3C(World Wide Web Consortium)와 WHATWG(Web Hypertext Application Technology Working Group)에 의해 표준화되어 있으며, 모든 주요 브라우저에서 지원된다.
목차
특징[편집]
웹스토리지는 쿠키와 몇 가지 중요한 측면에서 다르다.
목적[편집]
쿠키는 서버와의 통신을 위해 설계되었으며, 모든 요청에 자동으로 첨부되고 서버와 클라이언트 양쪽에서 접근할 수 있다. 반면, 웹스토리지는 오직 클라이언트 측 스크립트에서만 다룰 수 있다. 웹스토리지에 저장된 데이터는 HTTP 요청마다 자동으로 서버에 전송되지 않으며, 웹 서버는 웹스토리지에 직접 데이터를 쓸 수 없다. 그러나 이러한 동작은 명시적인 클라이언트 측 스크립트를 통해 구현할 수 있으므로, 서버와의 상호작용을 세밀하게 제어할 수 있다.
저장 용량[편집]
쿠키는 최대 4KB로 용량이 제한되어 있다. 이에 비해 웹스토리지는 훨씬 더 큰 저장 용량을 제공한다:
- 오페라(Opera) 10.50+: 5MB 저장 가능
- 사파리(Safari) 8: 5MB 저장 가능
- 파이어폭스(Firefox): 10MB 저장 가능 (2007년 기준으로는 출처(origin)당 5MB였음)
- 크롬(Chrome): 출처(origin)당 10MB (과거에는 5MB였음)
- 인터넷 익스플로러(Internet Explorer): 저장 영역(storage area)당 10MB
로컬 스토리지와 세션 스토리지[편집]
웹스토리지는 로컬 스토리지와 세션 스토리지, 두 가지 서로 다른 저장 영역을 제공하며, 이들은 사용 범위(scope)와 수명(lifetime)이 다르다.
로컬 스토리지는 출처(origin) 단위로 데이터를 저장한다. 여기서 출처란 프로토콜, 호스트 이름, 포트 번호의 조합이며, 동일 출처 정책(same-origin policy)에 따라 정의된다. 저장된 데이터는 동일 출처에서 로드된 모든 스크립트에서 접근 가능하며, 브라우저를 닫아도 사라지지 않고 유지된다. 이로 인해 웹스토리지는 RFC 6265의 8.5 및 8.6절에서 설명된 쿠키의 무결성 약화(Weak Integrity) 및 기밀성 약화(Weak Confidentiality) 문제로부터 자유롭다.
세션 스토리지는 출처(origin)뿐 아니라 인스턴스(창 또는 탭) 단위로도 구분되며, 해당 인스턴스가 종료될 때까지 데이터가 유지된다. 세션 스토리지는 같은 웹 애플리케이션의 서로 다른 인스턴스(예: 여러 창 또는 탭)가 서로 간섭 없이 독립적으로 실행되도록 지원하기 위해 설계되었으며, 이는 쿠키로는 잘 구현되지 않는 사용 사례다.
인터페이스 및 데이터 모델[편집]
웹스토리지는 쿠키보다 더 나은 프로그래밍 인터페이스를 제공한다. 키와 값이 모두 문자열인 연관 배열(associative array) 형식의 데이터 모델을 제공하여, 프로그래밍이 더 직관적이고 효율적이다.
사용법[편집]
웹스토리지를 지원하는 브라우저에서는 sessionStorage 와 localStorage 라는 전역 객체가 window 객체 수준에서 선언되어 있다. 아래의 JavaScript 코드는 이러한 브라우저에서 웹스토리지 기능을 사용하는 예시다:
// Store value on browser for duration of the session
sessionStorage.setItem("key", "value");
// Retrieve value (gets deleted when browser is closed and re-opened) ...
alert(sessionStorage.getItem("key"));
// Store value on the browser beyond the duration of the session
localStorage.setItem("key", "value");
// Retrieve value (persists even after closing and re-opening the browser)
alert(localStorage.getItem("key"));
Storage API를 통해 저장할 수 있는 데이터는 문자열(String) 만 가능하다. 다른 데이터 타입을 저장하려고 하면, 대부분의 브라우저에서는 자동으로 문자열로 변환된다. 그러나 JSON으로 변환하면 JavaScript 객체도 효과적으로 저장할 수 있다.
// Store an object instead of a string
localStorage.setItem("key", {name: "value"});
alert(typeof localStorage.getItem('key')); // string
// Store an integer instead of a string
localStorage.setItem("key", 1);
alert(typeof localStorage.getItem("key")); // string
// Store an object using JSON
localStorage.setItem("key", JSON.stringify({name: "value"}));
alert(JSON.parse(localStorage.getItem("key")).name); // value
명칭[편집]
W3C 초안의 공식 명칭은 "Web Storage"이다. 예전에는 "DOM Storage"라는 용어도 널리 사용되었지만, 현재는 점점 사용이 줄어들고 있다. 예를 들어, Mozilla와 Microsoft의 개발자 사이트에서도 과거의 "OM Storage" 관련 문서들이 “Web Storage”라는 이름으로 대체되었다.응
여기서 DOM이란 이름은 문자 그대로 문서 객체 모델(Document Object Model) 을 의미하지는 않는다. W3C에 따르면, "DOM이라는 용어는 웹 애플리케이션의 스크립트에서 접근할 수 있는 API 집합을 지칭하는 것이며, 실제로 Document 객체의 존재를 의미하지는 않는다…"라고 명시하고 있다.
웹스토리지 관리[편집]
웹스토리지 객체 저장은 현재의 모든 주요 브라우저에서 기본적으로 활성화되어 있으며, 브라우저 제조사들은 사용자가 이를 직접 활성화 또는 비활성화하거나, 웹스토리지 '캐시'를 삭제할 수 있는 기능을 제공한다. 또한, 서드파티 브라우저 확장 기능을 통해서도 유사한 제어가 가능하다.
브라우저마다 웹스토리지 데이터를 저장하는 방식은 다음과 같다:
- 파이어폭스(Firefox): 사용자의 프로필 폴더 내의
webappsstore.sqlite라는 SQLite 파일에 저장한다. - 크롬(Chrome): 사용자 프로필 내 SQLite 파일에 저장되며, Windows에서는
\AppData\Local\Google\Chrome\User Data\Default\Local Storage하위 폴더에 위치하고, macOS에서는~/Library/Application Support/Google/Chrome/Default/Local Storage폴더에 저장된다. - 오페라(Opera): Opera 버전에 따라 다르며,
\AppData\Roaming\Opera\Opera\sessions\autosave.win또는\AppData\Local\Opera\Opera\pstorage\에 저장된다. - 인터넷 익스플로러(Internet Explorer):
\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage경로에 저장된다. - 사파리(Safari): 숨겨진 "
safari" 폴더 내의 "LocalStorage"라는 폴더에 저장된다.
동영상[편집]
참고자료[편집]
- "Web storage", Wikipedia
같이 보기[편집]
