localStorage란 무엇인가?
HTML5의 localStorage는 브라우저에 문자열 데이터를 저장하는 웹 스토리지 API입니다. 가장 큰 특징은 현재 세션이 종료된 후에도 데이터가 그대로 유지된다는 점입니다. localStorage는 별도의 만료 기간이 없어 사용자가 직접 삭제하지 않는 한 데이터를 계속 보관하는 반면, sessionStorage는 세션에 한정되어 있어 브라우저나 탭을 닫는 순간 저장된 데이터가 모두 사라집니다.
localStorage의 주요 용도
Local Storage는 여러 창(윈도우)에 걸쳐 데이터를 공유하고, 현재 세션이 끝난 뒤에도 지속되는 저장소를 위해 설계되었습니다. 특히 웹 애플리케이션은 성능 향상을 위해 사용자가 작성한 문서 전체나 사용자의 메일함처럼 메가바이트 단위의 대용량 사용자 데이터를 클라이언트 측에 저장할 때 localStorage를 활용할 수 있습니다.
localStorage 주요 메서드
- setItem(key, value) — 키-값 쌍으로 데이터를 저장합니다.
- getItem(key) — 지정한 키에 해당하는 값을 가져옵니다.
- removeItem(key) — 지정한 키의 데이터를 삭제합니다.
- clear() — localStorage에 저장된 모든 데이터를 삭제합니다.
실습 예제: 페이지 방문 횟수 카운터
다음 코드를 실행하면 HTML5 localStorage의 동작 방식을 직접 확인할 수 있습니다. 아래 예제는 페이지 방문 횟수를 localStorage에 저장하고 불러오는 간단한 카운터입니다.
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}else{
localStorage.hits = 1;
}
document.write("Total Hits on the website:" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>위 예제를 실행하면 페이지를 새로고침할 때마다 방문 횟수가 1씩 증가합니다. 중요한 점은 창을 닫았다가 다시 열어도 카운트 값이 초기화되지 않고 그대로 유지된다는 것입니다. 이는 localStorage가 세션과 무관하게 데이터를 영구적으로 보관하기 때문입니다.
참고로 localStorage에는 문자열만 저장할 수 있으므로, 숫자나 객체를 저장할 때는 위 예제처럼 Number()로 변환하거나 JSON.stringify()와 JSON.parse()를 함께 사용하는 것이 좋습니다.