Window.sessionStorage

sessionStorage 속성은 session Storage 객체를 접근 하게 해줍니다. sessionStorage는 Window.localStorage와 유사합니다. 하지만 유일한 차이점은 localStorage에 저장되는 데이터는 만료 시점이 없지만 sessionStorage에 저장된 데이터는 페이지 세션이 종료되면 바로 지워진다는 점입니다. 페이지 세션은 브라우저가 열리고 페이지가 다시 보여지거나 복구되어도 유지됩니다. 세션 쿠키의 동작과는 달리 새 탭이나 윈도우에서 페이지를 열게 되면 새로운 세션이 생성되게 됩니다. 

구문

// sessionStorage에 데이터 저장
sessionStorage.setItem('key', 'value');

// sessionStorage에서 저장된 데이터 가져옴
var data = sessionStorage.getItem('key');

Storage 객체.

예제

다음 코드는 현재 도메인 세션의 session Storage 객체에 접근하여  Storage.setItem()를 호출하여 데이터를 추가하는 예제입니다.

sessionStorage.setItem('myCat', 'Tom');

다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.

// 저장할 텍스트 필드의 문장을 가져옵니다.
var field = document.getElementById("field");
 
// 만약 autosave키의 값이 있다면
// (이는 페이지가 의도치 않게 재시작 되었을 경우에만 해당됨)
if (sessionStorage.getItem("autosave")) {
  // 저장된 문장을 텍스트 필드로 복구합니다.
  field.value = sessionStorage.getItem("autosave");
}
 
// 텍스트 필드 변경을 확인하고자 이벤트 리스너를 등록 합니다.
field.addEventListener("change", function() {
  // session storage object에 변경된 값을 저장합니다.
  sessionStorage.setItem("autosave", field.value);
});

Note: 전체 예제를 보려면 Using the Web Storage API 를 참고하세요.

명세

Specification Status Comment
Unknown
The definition of 'sessionStorage' in that specification.
Unknown  

브라우저 호환성

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

같이 보기