JavaScript로 HTML 데이터를 로컬에 저장하는 방법
웹 페이지에서 데이터를 브라우저에 로컬로 저장하려면 쿠키(Cookie)를 활용할 수 있습니다. 쿠키는 클라이언트 측에 작은 텍스트 데이터를 저장하는 전통적인 방식으로, JavaScript의 document.cookie 속성을 통해 간단하게 읽고 쓸 수 있습니다.
아래 예제는 페이지가 실행된 횟수를 쿠키에 저장하고, 접속할 때마다 그 값을 1씩 증가시켜 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<p id="visits"></p>
<script>
var visits = parseInt(document.cookie.split("=")[1]);
if (isNaN(visits)) visits = 0;
visits++;
document.cookie = "visits=" + visits;
document.getElementById("visits").innerHTML = "이 페이지는 " + visits + "번 실행되었습니다.";
</script>
</body>
</html>
위 코드를 HTML 파일로 저장한 뒤 웹 브라우저에서 열기만 하면 됩니다. 페이지를 새로고침할 때마다 실행 횟수가 1씩 증가하는 것을 확인할 수 있습니다.
코드 동작 원리
document.cookie.split("=")[1]— 저장된 쿠키 문자열에서 값 부분만 추출합니다.isNaN(visits)— 쿠키가 없거나 값이 숫자가 아니면 0으로 초기화합니다.document.cookie = "visits=" + visits— 증가된 값을 다시 쿠키에 저장합니다.
더 나은 대안: localStorage 활용하기
쿠키는 저장 용량이 약 4KB로 제한되고, 모든 HTTP 요청마다 서버로 함께 전송된다는 단점이 있습니다. 단순히 브라우저에만 데이터를 보관하려면 localStorage를 사용하는 것이 더 효율적입니다.
<!DOCTYPE html>
<html>
<body>
<p id="count"></p>
<script>
var count = parseInt(localStorage.getItem("visits")) || 0;
count++;
localStorage.setItem("visits", count);
document.getElementById("count").innerHTML = "이 페이지는 " + count + "번 실행되었습니다.";
</script>
</body>
</html>
localStorage는 약 5MB까지 데이터를 저장할 수 있고 서버로 전송되지 않으며, API도 setItem()과 getItem()처럼 직관적입니다. 따라서 최신 웹 개발에서는 세션 유지 등 특수한 경우를 제외하고 localStorage 사용이 권장됩니다.