Web Storage API

You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!

Web Storage API는 key/value 쌍을 저장할 수 있는 브라우저로부터 쿠키를 사용하는 것 보다 훨씬 더 직관적인 메커니즘을 제공합니다.

웹 스토리지 컨셉과 사용법

웹 스토리지의 두가지 메커니즘

  • sessionStorage 는 페이지 세션이 유지되는 동안 사용할 수 있는 각각의 오리진에 별도의 저장 공간을 유지합니다. (페이지 리로드 및 복구를 포함하여, 브라우저가 열려있는 한)
  • localStorage 도 위와 같은 컨셉이지만, 브라우저가 닫히고, 다시 열려도 데이터를 유지합니다.

위의 메커니즘은 Window.sessionStorageWindow.localStorage 의 속성들을 통해 사용할 수 있습니다. (더 정확히 말하면, 지원하는 브라우저에서 Window 객체는 localStoragesessionStorage 속성이 중단되는 WindowLocalStorageWindowSessionStorage 객체를 구현합니다). 이 중 하나를 호출함으로 써, 데이터를 저장, 검색 및 삭제할 수 있는  Storage 객체의 인스턴스가 생성됩니다. 각각의 오리진에 대해 다른 스토리지 객체가 sessionStoragelocalStorage에 사용됩니다. 이들은 별도로 기능하고 컨트롤 됩니다.

Note:  파이어폭스 45 버전 이후부터는 브라우저가 충돌하거나 재시작될 때, 오리진당 저장되는 데이터의 용량을 10MB로 제한됩니다. 이것은 과도한 웹 스토리지의 사용으로 야기된 메모리 문제를 피하기 위함입니다.

Note: 사용자가 써드 파티 쿠키를 사용 중단했을 경우, 써드 파티 Iframe의 웹 스토리지 접근은 거부(disabled third-party cookies) 됩니다. (파이어폭스는 43 버전부터 이 동작을 시행합니다.)

Note: 웹 스토리지는 mozStorage(모질라의 XPCOM 인터페이스인 SQLite) 또는 Session store API(확장을 위해 사용되는 XPCOM 스토리지 유틸리티)와 다릅니다.

웹 스토리지 인터페이스

Storage
특정한 도메인과 저장소 타입 (세션 스토리지 또는 로컬 스토리지) 에 대한 데이터 설정, 검색 그리고 삭제를 할 수 있습니다.
Window
The Web Storage API extends the Window object with two new properties — Window.sessionStorage and Window.localStorage — which provide access to the current domain's session and local Storage objects respectively, and a Window.onstorage event handler that fires when a storage area changes (e.g. a new item is stored.)
StorageEvent
storage 이벤트는 저장 공간이 변경될 때, Window 객체에서 실행됩니다.

예제

일반적인 웹 스토리지 사용법을 설명하기 위해, Web Storage Demo 라는 예제를 만들었습니다. landing page는 색상, 폰트, 이미지 등을 커스터마이징하는 데 사용될 수 있는 컨트롤을 제공합니다. 다른 옵션을 선택하면, 이 페이지는 즉시 업데이트됩니다. 그리고 당신의 선택은 localStorage에 저장됩니다. 그러니까, 페이지를 벗어났다가 이후에 다시 들어와도 당신의 선택은 기억됩니다.

덧붙여서, 우리는 event output page 페이지를 제공하고 있습니다. 다른 탭에서 이 페이지를 로드하고 변화를 주면, StorageEvent가 실행됨으로써 업데이트된 스토리지 정보를 볼 수 있습니다.

Specifications

Specification Status Comment
HTML Living Standard Living Standard  

Browser compatibility

Window.localStorage

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
localStorageChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

Window.sessionStorage

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
sessionStorageChrome Full support 5Edge Full support 12Firefox Full support 2IE Full support 8Opera Full support 10.5Safari Full support 4WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support 11Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

Private Browsing / Incognito modes

Most modern browsers support a privacy option called 'Incognito', 'Private Browsing' or something similar that doesn't store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.

Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.

Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at this WHATWG blog post that specifically deals with this topic.

See also