20230711 [JavaScript] localStorage와 sessionStorage

웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공한다.

• setItem(key, value) : 키-값 쌍을 보관한다.
• getItem(key) : 키에 해당하는 값을 받아옵니다.
• removeItem(key) : 키와 해당 값을 삭제합니다.
• clear() : 모든 것을 삭제합니다.
• key(index) : 인덱스(index)에 해당하는 키를 받아옵니다.
• length : 저장된 항목의 개수를 얻습니다.

두 스토리지 객체는 Map과 유사하다. setItem, getItem, removeItem을 지원한다. 하지만 인덱스를 사용해 키에 접근할 수 있다는 점(key(index))에서 차이가 있다.

localStorage

localStorage의 주요 기능은 다음과 같다.

• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.

localStorage.setItem('test', 1);

브라우저를 닫았다가 다시 열거나, 다른 창에서 페이지를 열더라도 아래와 같은 결과가 나온다.

alert( localStorage.getItem('test') ); // 1

localStorage는 동일한 오리진을 가진 모든 창에서 공유된다.

sessionStorage

sessionStorage 객체는 localStorage에 비해 자주 사용되진 않는다.
제공하는 프로퍼티와 메서드는 같지만 훨씬 제한적이기 때문이다.

• 페이지를 새로고침할 때 sessionStorage에 저장된 데이터는 사라지지 않는다. 하지만 탭을 닫고 새로 열 때는 사라진다.

sessionStorage.setItem('test', 1);

페이지를 새로 고침하더라도 데이터가 여전히 남아있는 것을 확인할 수 있다.

alert( sessionStorage.getItem('test') ); // 새로 고침 후: 1

하지만 다른 탭에서 본 페이지를 열고 바로 위 예시만 실행해보면 null이 반환되는 것을 확인할 수 있다.
이렇듯 sessionStorage는 오리진뿐만 아니라 브라우저 탭에도 종속되어 있다. 이런 제약 때문에 sessionStorage는 잘 사용되지 않는다.