HTML5 클라이언트 측 저장소란?
클라이언트 측 브라우저 데이터베이스가 필요하다면 HTML5의 로컬 스토리지(Local Storage)를 활용하는 것이 가장 대표적인 방법입니다. 로컬 스토리지는 여러 브라우저 창에 걸쳐 데이터를 공유할 수 있고, 현재 세션이 종료된 후에도 데이터가 유지되도록 설계된 영구 저장소입니다.
특히 웹 애플리케이션은 성능상의 이유로 사용자가 작성한 문서 전체나 사용자의 메일함 같은 수 메가바이트(MB) 규모의 데이터를 서버가 아닌 클라이언트 측에 저장하고 싶어 하는 경우가 많습니다. 이럴 때 로컬 스토리지가 유용하게 사용됩니다.
로컬 스토리지의 주요 특징
- 세션이 종료되어도 데이터가 삭제되지 않고 영구적으로 유지됩니다.
- 동일한 도메인 내에서 여러 창과 탭 간에 데이터를 공유할 수 있습니다.
- 약 5MB~10MB 정도의 문자열 데이터를 저장할 수 있습니다.
- 키(key)와 값(value) 형태로 데이터를 관리하며, 값은 문자열로 저장됩니다.
로컬 스토리지 활용 예제
아래 예제는 페이지 방문 횟수(히트 카운터)를 로컬 스토리지에 저장하고 화면에 출력하는 코드입니다. 페이지를 새로 고침하면 방문 횟수가 증가하며, 창을 닫았다가 다시 열어도 값이 유지되는 것을 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<body>
<script>
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
} else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>페이지를 새로 고침하면 방문 횟수가 증가합니다.</p>
<p>창을 닫았다가 다시 열어 결과를 확인해 보세요.</p>
</body>
</html>다른 선택 가능한 옵션들
로컬 스토리지 외에도 요구 사항에 따라 다음과 같은 옵션을 고려할 수 있습니다.
1. 세션 스토리지(Session Storage)
로컬 스토리지와 사용법이 거의 동일하지만, 데이터가 브라우저 탭(세션)이 열려 있는 동안에만 유지됩니다. 탭을 닫으면 데이터가 삭제되므로 임시 데이터 저장에 적합합니다.
2. IndexedDB
대용량 데이터를 구조화하여 저장해야 한다면 IndexedDB가 좋은 선택입니다. 트랜잭션 기반의 NoSQL 데이터베이스로, 인덱싱과 복잡한 쿼리가 가능하며 오프라인 웹 애플리케이션에 널리 사용됩니다.
3. 쿠키(Cookie)
저장 용량은 약 4KB로 제한적이지만, 서버와 자동으로 주고받을 수 있어 인증 정보나 세션 관리 등 서버 연동이 필요한 경우에 적합합니다.
정리
간단한 영구 데이터 저장에는 로컬 스토리지, 임시 데이터에는 세션 스토리지, 대용량 구조화 데이터에는 IndexedDB, 서버 연동이 필요한 경우에는 쿠키를 사용하는 것이 바람직합니다. 대부분의 클라이언트 측 데이터베이스 요구 사항은 HTML5의 로컬 스토리지만으로도 충분히 해결할 수 있습니다.