HTML DOM의 Storage removeItem() 메서드는 지정된 키 이름(key name)을 전달하여 스토리지 객체에서 해당 항목을 삭제하는 데 사용됩니다. localStorage와 sessionStorage 모두에서 사용할 수 있으며, 웹 브라우저에 저장된 데이터를 간편하게 관리할 때 유용합니다.
문법(Syntax)
Storage removeItem() 메서드의 기본 문법은 다음과 같습니다.
localStorage.removeItem(keyname);
또는
sessionStorage.removeItem(keyname);
여기서 keyname은 문자열(string) 타입으로, 삭제하고자 하는 항목의 키 이름을 나타냅니다. 만약 전달한 키가 스토리지에 존재하지 않더라도 removeItem()은 아무 작업 없이 조용히 종료되며, 별도의 오류는 발생하지 않습니다.
예제(Example)
Storage removeItem() 메서드의 실제 사용 예제를 살펴보겠습니다. 아래 예제에서는 localStorage에 데이터를 저장한 후, REMOVE 버튼으로 항목을 삭제하고 DISPLAY 버튼으로 현재 값을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage removeItem() method example</h1>
<p>아래 버튼을 클릭하면 localStorage 항목이 삭제됩니다</p>
<button onclick="itemDelete()">REMOVE</button>
<p>아래 버튼을 클릭하면 localStorage 항목이 표시됩니다</p>
<button onclick="itemShow()">DISPLAY</button>
<p id="Sample"></p>
<script>
localStorage.setItem("TEXT1", "HELLO WORLD");
function itemDelete() {
localStorage.removeItem("TEXT1");
itemShow();
}
function itemShow() {
var x = localStorage.getItem("TEXT1");
document.getElementById("Sample").innerHTML = "'TEXT1' 키의 값은 " + x;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
DISPLAY 버튼을 클릭한 경우 − localStorage에 저장된 'TEXT1' 키의 값이 화면에 출력됩니다.
REMOVE 버튼을 클릭한 경우 − removeItem() 메서드에 의해 'TEXT1' 항목이 삭제되며, 이후 값이 null로 표시되는 것을 확인할 수 있습니다.
정리
removeItem() 메서드는 특정 키 하나만 선택적으로 삭제할 때 사용하며, 스토리지의 모든 데이터를 한 번에 비우고 싶다면 clear() 메서드를 사용하는 것이 좋습니다. 또한 삭제 전에 getItem()으로 값을 미리 확인해 두면, 필요한 경우 데이터를 복원하는 로직을 구현하기도 수월합니다.