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);
});

표준 정보

브라우저 호환성

브라우저 마다 localSotrage와 sessionStorage에 대해서 다양한 지원 범위를 가지고 있습니다.  자세한 내용은 detailed rundown of all the storage capacities for various browsers 를 참고 하세요.

참고자료

• Using the Web Storage API
• Window.localStorage