웹 브라우저의 localStorage에 저장된 데이터를 JavaScript로 삭제해야 하는 경우가 종종 있습니다. 예를 들어 사용자 로그아웃 시 저장된 정보를 초기화하거나, 캐시된 데이터를 비워야 할 때 유용합니다. localStorage를 지우는 방법은 크게 두 가지가 있으며, 두 방법 모두 동일한 결과를 얻을 수 있습니다.
방법 1 – clear() 메서드 사용
가장 간단하고 권장되는 방법은 clear() 메서드를 호출하는 것입니다. 이 메서드는 해당 도메인(오리진)에 저장된 모든 키와 값을 한 번에 삭제합니다.
localStorage.clear();
방법 2 – 반복문으로 모든 키 삭제
두 번째 방법은 for...in 반복문을 사용하여 localStorage의 모든 키를 순회하면서 하나씩 삭제하는 것입니다.
for(key in localStorage){
delete localStorage[key];
}두 방법 모두 정상적으로 작동하지만, 코드의 가독성과 안정성 측면에서 clear() 메서드를 사용하는 것이 더 좋습니다.
예제 코드
다음 예제는 localStorage에 데이터를 저장한 후 clear() 메서드로 삭제하고, 그 결과를 화면에 출력하는 전체 코드입니다.
<html>
<body>
<p id = "storage"></p>
<script>
if (typeof(Storage) !== "undefined") {
localStorage.setItem("product", "Tutorix");
// 화면에 표시하기 전에 데이터 삭제
localStorage.clear();
document.getElementById("storage").innerHTML = localStorage.getItem("product");
}
else {
document.getElementById("storage").innerHTML = "죄송합니다. 웹 스토리지를
지원하지 않는 브라우저입니다...";
}
</script>
</body>
</html>추가 팁: 특정 항목만 삭제하기
전체 데이터가 아닌 특정 키만 삭제하고 싶다면 removeItem() 메서드를 사용할 수 있습니다.
localStorage.removeItem("product");이처럼 상황에 맞는 메서드를 선택하면 브라우저 저장소를 효율적으로 관리할 수 있습니다.