웹 스토리지 삭제가 필요한 이유
민감한 데이터를 로컬 머신에 저장하는 것은 보안상 위험할 수 있으며, 잠재적인 보안 취약점을 남길 수 있습니다. 반면 세션 스토리지(Session Storage)에 저장된 데이터는 세션이 종료되는 즉시 브라우저에 의해 자동으로 삭제되므로 상대적으로 안전합니다.
하지만 로컬 스토리지(LocalStorage)는 브라우저를 닫아도 데이터가 유지되기 때문에, 불필요하거나 민감한 정보가 저장되어 있다면 직접 삭제해 주는 것이 좋습니다.
특정 키(Key)만 삭제하기
로컬 스토리지에서 특정 항목 하나만 제거하고 싶다면 localStorage.removeItem('key') 메서드를 사용합니다. 여기서 'key'는 삭제하고자 하는 값의 키 이름입니다.
// 'username'이라는 키의 데이터만 삭제
localStorage.removeItem('username');저장된 모든 데이터 한 번에 삭제하기
로컬 스토리지에 저장된 모든 설정과 데이터를 한꺼번에 지우려면 localStorage.clear() 메서드를 호출하면 됩니다.
실전 예제 코드
아래 예제는 페이지가 로드될 때마다 localStorage.clear()를 호출해 저장된 데이터를 모두 지운 뒤, 방문 횟수(hits)를 다시 집계하는 코드입니다.
<!DOCTYPE HTML>
<html>
<body>
<script>
// 저장된 모든 데이터 삭제
localStorage.clear();
// 방문 횟수 초기화 후 재집계
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
} else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>페이지를 새로고침해도 방문 횟수 카운터는 증가하지 않습니다.</p>
<p>창을 닫았다가 다시 열어 결과를 확인해 보세요.</p>
</body>
</html>정리
- 특정 데이터 삭제:
localStorage.removeItem('key') - 전체 데이터 삭제:
localStorage.clear() - 세션 스토리지: 세션 종료 시 브라우저가 자동으로 삭제하므로 별도 관리가 필요 없음
보안이 중요한 애플리케이션에서는 로컬 스토리지에 민감한 정보를 장기간 보관하지 말고, 사용이 끝난 데이터는 적시에 삭제하는 습관을 들이는 것이 안전합니다.