브라우저 창이나 탭이 닫힐 때 localStorage 데이터를 삭제하는 방법

브라우저 창이나 탭이 닫히는 시점에 localStorage 데이터를 자동으로 삭제하고 싶다면, window.onunload 이벤트를 활용하면 됩니다. 이 이벤트는 페이지가 언로드될 때, 즉 사용자가 탭이나 브라우저 창을 닫거나 다른 페이지로 이동할 때 발생합니다.

기본 구현 예제

예를 들어, 전역 범위에 MyStorage라는 이름의 localStorage 객체가 선언되어 있다고 가정해 보겠습니다. 이 경우 다음과 같이 이벤트 핸들러를 작성할 수 있습니다.

window.onunload = () => {
    // localStorage 데이터 삭제
    window.MyStorage.clear()
}

이 코드를 실행하면 탭이나 브라우저 창이 닫히는 순간 해당 localStorage에 저장된 모든 데이터가 삭제됩니다.

참고: sessionStorage 활용하기

만약 데이터가 탭 세션 동안만 유지되면 충분하다면, 굳이 onunload 이벤트를 직접 처리하지 않아도 됩니다. sessionStorage는 탭이 닫히면 브라우저가 자동으로 데이터를 삭제해 주기 때문에 더 간편한 대안이 될 수 있습니다.

// 탭이 닫히면 자동으로 삭제됨
sessionStorage.setItem('tempData', 'value');

주의 사항

unload 이벤트는 페이지 새로고침이나 다른 페이지로의 이동 시에도 발생하기 때문에, 단순히 탭 종료만 감지하는 것은 아닙니다. 또한 최신 브라우저에서는 성능상의 이유로 unload 대신 pagehide 이벤트 사용이 권장되고 있으니, 상황에 맞게 선택하는 것이 좋습니다.