2022. 4. 29. 12:59ㆍ프로그래밍/자바스크립트
Window.sessionStorage
sessionStorage 읽기 전용 속성은 현재 출처 세션의 Storage 객체에 접근합니다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거되는 차이가 있습니다.
- 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있습니다.
- 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성합니다.
- 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성합니다.
- 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화합니다.
sessionStorage에 저장한 자료는 페이지 프로토콜별로 구분합니다. 특히 HTTP(http://example.com)로 방문한 페이지에서 저장한 데이터는 같은 페이지의 HTTPS(https://example.com)와는 다른 sessionStorage에 저장됩니다.
키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.
구문
myStorage = window.sessionStorage;
값
예외
예제
아래 코드는 현재 출처의 세션 Storage 객체에 접근한 후, Storage.setItem() (en-US)을 사용해 항목 하나를 추가합니다.
sessionStorage.setItem('myCat', 'Tom');
Copy to Clipboard다음 예제는 텍스트 필드의 문장을 자동 저장하여 브라우저가 의도치 않게 재시작 되었을 경우 자동으로 텍스트 필드의 내용을 저장된 문장으로 복구하여 작성한 내용이 사라지지 않게 합니다.
// 추적할 텍스트 입력 칸 가져오기
let field = document.getElementById("field");
// 자동저장 값이 존재하는지 판별
// (의도치 않게 페이지를 새로 불러올 경우에만 발생)
if (sessionStorage.getItem("autosave")) {
// 입력 칸의 콘텐츠 복구
field.value = sessionStorage.getItem("autosave");
}
// 텍스트 입력 칸의 변화 수신
field.addEventListener("change", function() {
// 결과를 세션에 저장
sessionStorage.setItem("autosave", field.value);
});
Copy to Clipboard참고: Web Storage API 사용하기 문서에서 전체 예제를 살펴보세요.
브라우저 호환성
Report problems with this compatibility data on GitHub

같이 보기
Found a problem with this page?
- Edit on GitHub
- Source on GitHub
- Report a problem with this content on GitHub
- Want to fix the problem yourself? See our Contribution guide.
Last modified: 2020년 12월 9일, by MDN contributors
출처 : https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 서프샤크 vpn 크롬 확장플러그인 (0) | 2025.11.24 |
|---|---|
| nods 사내망에서 proxy 설정 (0) | 2024.08.09 |
| 팝업창에서 부모창 호출 여러가지 방법 (0) | 2022.07.19 |