HTML5 로컬 스토리지란?
로컬 스토리지(Local Storage)는 여러 창(윈도우) 간에 데이터를 공유할 수 있고, 현재 세션이 종료된 후에도 데이터가 유지되도록 설계된 웹 저장소입니다. 특히 웹 애플리케이션에서는 성능상의 이유로 사용자가 작성한 문서 전체나 사용자의 메일함처럼 수 메가바이트에 달하는 사용자 데이터를 클라이언트 측에 저장해야 할 때가 많습니다.
HTML5의 localStorage는 문자열 데이터를 브라우저에 저장하며, 세션이 종료된 후에도 데이터가 그대로 유지됩니다. localStorage에는 만료 기간이 없는 반면, sessionStorage는 세션 동안에만 데이터가 유효하므로 브라우저를 닫는 순간 세션과 함께 데이터가 사라진다는 점이 큰 차이입니다.
즉, localStorage에 저장한 데이터는 브라우저를 닫더라도 삭제되지 않습니다. 이번 글에서는 이름(name)을 영구적으로 저장하는 예시를 살펴보겠습니다.
예제 코드
다음 코드를 실행하면 HTML5 로컬 스토리지를 사용하여 이름을 영구적으로 저장하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<div id = "demo"></div>
<script>
if (typeof(Storage) !== "undefined") {
localStorage.setItem("name", "John");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
} else {
document.getElementById("demo").innerHTML =
"The browser do not support Web Storage";
}
</script>
</body>
</html>코드 설명
1. Web Storage 지원 여부 확인typeof(Storage) !== "undefined" 조건문을 통해 현재 브라우저가 웹 스토리지를 지원하는지 먼저 검사합니다. 지원하지 않는 구형 브라우저에서는 오류 대신 안내 문구를 출력하도록 처리했습니다.
2. 데이터 저장 — setItem()localStorage.setItem("name", "John")은 키(key)가 "name"이고 값(value)이 "John"인 데이터를 로컬 스토리지에 저장합니다.
3. 데이터 읽기 — getItem()localStorage.getItem("name")은 저장된 값을 불러와 화면에 출력합니다. 페이지를 새로고침하거나 브라우저를 완전히 닫았다가 다시 열어도 "John"이라는 값이 그대로 유지되는 것을 확인할 수 있습니다.
정리
localStorage는 만료 기간 없이 데이터를 영구적으로 보관할 수 있는 편리한 클라이언트 저장소입니다. 다만 용량 제한(약 5MB)이 있고 문자열만 저장 가능하다는 점, 민감한 개인정보는 저장하지 않는 것이 안전하다는 점은 함께 기억해 두면 좋습니다.