HTML DOM localStorage clear() 메서드 – 웹 스토리지 전체 삭제 방법

개요

HTML DOM의 localStorage clear() 메서드는 웹 브라우저의 로컬 스토리지(Local Storage)에 저장된 모든 데이터를 한 번에 삭제하는 데 사용됩니다. 키-값 형태로 저장된 항목을 개별적으로 지우는 것이 아니라, 해당 도메인(오리진)에 저장된 전체 항목을 한꺼번에 비울 때 유용합니다.

이 메서드는 별도의 매개변수를 받지 않으며, 반환값도 없습니다. 호출 즉시 스토리지가 비워집니다.

문법(Syntax)

기본 문법은 다음과 같습니다.

localStorage.clear()

세션 스토리지(Session Storage)에서도 동일하게 사용할 수 있습니다.

sessionStorage.clear()

예제

다음 예제는 localStorage clear() 메서드를 실제로 활용하는 방법을 보여줍니다. 'Store Key' 버튼으로 데이터를 저장하고, 'Delete Key' 버튼으로 전체 데이터를 삭제합니다.

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage clear()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    table,th,td {
        border:1px solid black;
        border-collapse: collapse;
        margin: 0 auto;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>LocalStorage clear( )</legend>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td>PassKey</td>
<td>ja12ertplo</td>
</tr>
</table>
<input type="button" value="Store Key" onclick="storeData()">
<input type="button" value="Delete Key" onclick="clearData()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    function clearData(){
        localStorage.clear();
        divDisplay.textContent = 'Successfully Deleted';
    }
    function storeData(){
        localStorage.setItem('PassKey','ja12ertplo');
        divDisplay.textContent = 'Successfully Stored';
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

'Store Key' 버튼을 클릭하면 PassKey 값이 로컬 스토리지에 저장됩니다.

HTML DOM localStorage clear() 메서드 – 웹 스토리지 전체 삭제 방법

'Delete Key' 버튼을 클릭하면 clear() 메서드에 의해 저장된 모든 데이터가 삭제됩니다.

HTML DOM localStorage clear() 메서드 – 웹 스토리지 전체 삭제 방법

참고 사항

clear() 메서드는 같은 오리진(origin)에 저장된 모든 키-값 쌍을 삭제하며, 삭제된 데이터는 복구할 수 없습니다.
특정 항목 하나만 삭제하고 싶다면 removeItem(key) 메서드를 사용하는 것이 안전합니다.
저장된 항목 개수는 localStorage.length로 확인할 수 있으며, clear() 호출 후에는 0이 됩니다.