HTML DOM의 Storage setItem() 메서드는 웹 브라우저의 저장소(localStorage 또는 sessionStorage)에 키-값(key-value) 쌍을 생성하거나 기존 값을 업데이트할 때 사용하는 메서드입니다. 지정한 키가 이미 존재하면 해당 값을 새 값으로 덮어쓰고, 존재하지 않으면 새로운 항목을 추가합니다.
문법(Syntax)
Storage setItem() 메서드의 기본 문법은 다음과 같습니다.
localStorage.setItem(keyname, value);
또는
sessionStorage.setItem(keyname, value);
매개변수 설명
- keyname: 문자열 타입으로, 저장소에서 값을 식별하기 위한 키 이름을 나타냅니다.
- value: 해당 키에 저장될 값으로, 기존 값이 있다면 이 값으로 대체됩니다.
예제
다음은 Storage setItem() 메서드를 활용한 예제입니다. CREATE 버튼을 클릭하면 로컬 스토리지에 항목이 생성되고, DISPLAY 버튼을 클릭하면 저장된 값을 화면에 표시합니다.
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage setItem() method example</h1>
<p>Create the localstorage item by clicking the below button</p>
<button onclick="itemCreate()">CREATE</button>
<p>Display the localstorage item by clicking the below button</p>
<button onclick="itemShow()">DISPLAY</button>
<p id="Sample"></p>
<script>
function itemCreate() {
localStorage.setItem("TEXT1", "HELLO WORLD");
document.getElementById("Sample").innerHTML = "The key-value pair has been created";
}
function itemShow() {
var s = localStorage.getItem("TEXT1");
document.getElementById("Sample").innerHTML = "The 'TEXT1' key value is " + s;
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
CREATE 버튼 클릭 시 − setItem() 메서드를 통해 로컬 스토리지에 'TEXT1' 키와 'HELLO WORLD' 값이 저장되며, "키-값 쌍이 생성되었습니다"라는 메시지가 화면에 표시됩니다.
DISPLAY 버튼 클릭 시 − getItem() 메서드로 'TEXT1' 키에 저장된 값을 읽어와 화면에 출력합니다.
참고: 함께 알아두면 좋은 Storage 메서드
- getItem(key): 지정한 키에 해당하는 값을 반환합니다.
- removeItem(key): 지정한 키와 그 값을 저장소에서 삭제합니다.
- clear(): 저장소의 모든 항목을 삭제합니다.