sessionStorage

🔗 Window.sessionStorage

Window.sessionStorage - Web API | MDN

🔗 Web Storage API 사용하기

Web Storage API 사용하기 - Web API | MDN

• web Storage는 두 매커니즘을 가지고 있다.
  • sessionStorage는 페이지의 세션이 유지되는 동안 사용할 수 있는 각 origin별로 별도의 스토리지를 관리한다.(페이지 리로딩 및 복원을 포함한, 브라우저가 열려있는 한 최대한 긴 시간동안)
  • localStorage도 같은 일을 하지만, 브라우저가 닫히거나 다시 열리더라도 유지한다.
• sessionStorage는 현재 세션의 Storage 객체에 접근한다. sessionStorage는 localStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고, sessionStorage의 데이터는 페이지 세션이 끝날 때 제거된다.

👨🏻‍🏫 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있다. 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성한다. 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성한다. 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화한다.

• 키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 DOMString의 형태로 저장한다. 객체와 마찬가지로 정수 키는 자동으로 문자열을 변환한다.

사용 가능 여부 확인

• 다음은 localStorage가 지원되고 사용 가능한지 여부를 감지하는 함수이다. storageAvailable(’sessionStorage’)를 호출하여 sessionStorage 사용 가능 여부도 확인할 수 있다.

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // Firefox를 제외한 모든 브라우저
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // 코드가 존재하지 않을 수도 있기 떄문에 이름 필드도 확인합니다.
            // Firefox를 제외한 모든 브라우저
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // 이미 저장된 것이있는 경우에만 QuotaExceededError를 확인하십시오.
            (storage && storage.length !== 0);
    }
}

if (storageAvailable('localStorage')) {
    // 야호! 우리는 localStorage를 사용할 수 있습니다.
}
else {
    // 슬픈 소식, localStorage를 사용할 수 없습니다.
}

사용

// 값 설정
sessionStorage.setItem('myCat', 'Tom');

// 값 사용
sessionStorage.getItem('myCat');

// 인덱스로 키 호출
sessionStorage.key(index);

// 길이
sessionStorage.length

// 제거
sessionStorage.removeItem('myCat');
sessionStorage.clear();

호환

Chrome	5	WebViewAndroid	37
Firefox	2	ChromeAndroid	18
Internet Explorer	8	Firefox  for Android	4
Opera	10.5	Opera Android	11
Safari	4	Safari on iOS	3.2
		Samsung Internet	1.0
		Deno	1.10