JavaScript의 로컬 스토리지(localStorage)에서 요소(데이터)를 검색하려면 먼저 브라우저가 웹 스토리지를 지원하는지 확인해야 합니다. 그다음 setItem() 메서드로 데이터를 로컬 스토리지에 저장하고, 이후 getItem() 메서드를 사용해 저장된 데이터를 다시 불러올 수 있습니다.
로컬 스토리지는 브라우저를 닫아도 데이터가 유지된다는 점에서 세션 스토리지와 차이가 있습니다. 단, 사용자가 브라우저 설정에서 캐시나 사이트 데이터를 삭제하면 저장된 정보는 사라질 수 있으므로 이 점을 유의해야 합니다.
로컬 스토리지에 데이터를 저장하는 문법
데이터를 저장할 때는 다음과 같이 setItem() 메서드를 사용합니다. 첫 번째 인자는 키(key), 두 번째 인자는 값(value)입니다.
localStorage.setItem("키", "값");예제
다음 예제에서는 먼저 if 조건문을 사용해 브라우저의 스토리지 호환 여부를 확인합니다. 호환이 가능하면 localStorage.setItem()으로 'product'라는 키에 'Tutorix'라는 값을 저장한 뒤, localStorage.getItem() 속성을 통해 해당 데이터를 가져와 화면에 출력합니다. 만약 브라우저가 웹 스토리지를 지원하지 않으면 안내 문구가 표시됩니다.
<html>
<body>
<p id = "storage"></p>
<script>
if (typeof(Storage) !== "undefined") {
localStorage.setItem("product", "Tutorix");
document.getElementById("storage").innerHTML = localStorage.getItem("product");
}
else {
document.getElementById("storage").innerHTML = "죄송합니다. 웹 스토리지를 지원하지 않는 브라우저입니다...";
}
</script>
</body>
</html>실행 결과
Tutorix
위 코드를 실행하면 로컬 스토리지에 저장된 'Tutorix'라는 값이 정상적으로 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 setItem()과 getItem()만 활용하면 별도의 서버 없이도 브라우저에 간단한 데이터를 영구적으로 저장하고 조회할 수 있습니다.