1. 웹 저장소(Web Storage)란?
웹 저장소는 HTML5에서 추가된 기능으로, 사용자 브라우저에 데이터를 저장할 수 있게 합니다. 웹 저장소는 주로 로컬 스토리지와 세션 스토리지로 나뉘며, 두 방식 모두 쿠키보다 많은 데이터를 저장할 수 있고, 서버로 데이터를 전송하지 않습니다.
- 로컬 스토리지(Local Storage): 브라우저에 영구적으로 저장되며, 브라우저를 종료해도 데이터가 남아 있습니다.
- 세션 스토리지(Session Storage): 세션이 유지되는 동안만 저장되며, 탭이나 창을 닫으면 데이터가 삭제됩니다.
2. 로컬 스토리지 사용하기
로컬 스토리지는 localStorage 객체를 사용하여 접근하며, 주로 setItem, getItem, removeItem, clear 메서드로 데이터를 관리합니다.
데이터 저장하기: setItem
localStorage.setItem('username', '홍길동'); // 'username'이라는 키로 '홍길동'을 저장
데이터 가져오기: getItem
const username = localStorage.getItem('username');
console.log(username); // '홍길동' 출력데이터 삭제하기: removeItem
localStorage.removeItem('username'); // 'username' 키로 저장된 데이터 삭제모든 데이터 삭제하기: clear
localStorage.clear(); // 모든 로컬 스토리지 데이터 삭제3. 세션 스토리지 사용하기
세션 스토리지는 sessionStorage 객체를 사용하여 접근하며, 로컬 스토리지와 사용 방법은 동일합니다. 다만, 탭이 닫힐 때 데이터가 사라지는 점이 다릅니다.
데이터 저장하기
sessionStorage.setItem('sessionKey', '세션 데이터');데이터 가져오기
const sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData); // '세션 데이터' 출력데이터 삭제하기
sessionStorage.removeItem('sessionKey');모든 데이터 삭제하기
sessionStorage.clear();4. 로컬 스토리지와 세션 스토리지 예제
아래는 로컬 스토리지와 세션 스토리지로 데이터를 저장하고, 화면에 표시하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>웹 저장소 예제</title>
</head>
<body>
<h2>웹 저장소 예제</h2>
<!-- 로컬 스토리지 -->
<input type="text" id="localInput" placeholder="로컬 데이터 입력">
<button onclick="saveLocal()">로컬 저장</button>
<button onclick="showLocal()">로컬 보기</button>
<p id="localOutput"></p>
<!-- 세션 스토리지 -->
<input type="text" id="sessionInput" placeholder="세션 데이터 입력">
<button onclick="saveSession()">세션 저장</button>
<button onclick="showSession()">세션 보기</button>
<p id="sessionOutput"></p>
<script>
// 로컬 스토리지 저장
function saveLocal() {
const localData = document.getElementById('localInput').value;
localStorage.setItem('localData', localData);
alert('로컬 스토리지에 저장되었습니다.');
}
// 로컬 스토리지 보기
function showLocal() {
const localData = localStorage.getItem('localData');
document.getElementById('localOutput').innerText = localData ? `로컬 데이터: ${localData}` : '저장된 로컬 데이터가 없습니다.';
}
// 세션 스토리지 저장
function saveSession() {
const sessionData = document.getElementById('sessionInput').value;
sessionStorage.setItem('sessionData', sessionData);
alert('세션 스토리지에 저장되었습니다.');
}
// 세션 스토리지 보기
function showSession() {
const sessionData = sessionStorage.getItem('sessionData');
document.getElementById('sessionOutput').innerText = sessionData ? `세션 데이터: ${sessionData}` : '저장된 세션 데이터가 없습니다.';
}
</script>
</body>
</html>코드 설명
- saveLocal(): 입력된 데이터를 로컬 스토리지에 저장합니다.
- showLocal(): 로컬 스토리지에서 데이터를 가져와 화면에 표시합니다.
- saveSession(): 입력된 데이터를 세션 스토리지에 저장합니다.
- showSession(): 세션 스토리지에서 데이터를 가져와 화면에 표시합니다.
5. 로컬 스토리지와 세션 스토리지의 차이점
기능로컬 스토리지 (Local Storage)세션 스토리지 (Session Storage)
| 데이터 유지 | 영구적 (사용자가 지우기 전까지) | 브라우저 탭 종료 시 삭제 |
| 용량 | 약 5~10MB (브라우저에 따라 다름) | 약 5MB |
| 사용 예시 | 사용자 설정, 장바구니 | 페이지 내 임시 데이터 저장 |
| 데이터 접근 범위 | 도메인 내 모든 탭 | 탭 내에서만 유효 |
6. 로컬 스토리지와 세션 스토리지의 활용 예시
1) 사용자 설정 저장
웹 사이트의 테마 설정, 글꼴 크기 등의 사용자 설정을 로컬 스토리지에 저장하여, 재방문 시에도 설정이 유지되도록 할 수 있습니다.
2) 로그인 세션 관리
세션 스토리지는 사용자가 로그인한 동안의 정보를 저장하여, 새 탭을 열 때마다 로그인 상태를 유지할 필요가 없도록 할 수 있습니다.
3) 장바구니 데이터
쇼핑몰에서는 장바구니 데이터를 로컬 스토리지에 저장하여, 사용자가 페이지를 새로고침하거나 재방문해도 장바구니 내용을 확인할 수 있도록 할 수 있습니다.
요약
이번 강의에서는 HTML5의 로컬 스토리지와 세션 스토리지를 사용해 사용자 데이터를 브라우저에 저장하고 관리하는 방법을 배웠습니다. 이러한 웹 저장소를 활용하면 웹 페이지가 더욱 동적으로 사용자에게 맞춤형 경험을 제공할 수 있습니다. 다음 강의에서는 고급 HTML5 기능과 최신 API를 활용한 웹 개발 기법을 소개하겠습니다.
'Study > HTML' 카테고리의 다른 글
| HTML 기초 강의 15편: 고급 HTML5 기능과 최신 API (1) | 2024.11.15 |
|---|---|
| HTML 기초 강의 13편: 캔버스(Canvas)로 그래픽 그리기 (0) | 2024.11.13 |
| HTML 기초 강의 12편: SEO 기초와 HTML 최적화 (0) | 2024.11.12 |
| HTML 기초 강의 11편: 웹 접근성(Accessibility) 기초와 ARIA 태그 (1) | 2024.11.11 |
| HTML 기초 강의 10편: 이미지, 비디오, 오디오 삽입하기 (3) | 2024.11.10 |
