HTML5 웹 저장소(Web Storage)
웹 저장소의 개념과 필요성(Concept and Necessity of Web Storage)
웹 저장소는 사용자의 브라우저 내에 데이터를 저장하는 메커니즘을 제공하는 HTML5의 기능입니다. 기존의 쿠키(Cookies)와 비교하여 더 많은 데이터를 저장할 수 있으며, 서버에 데이터를 전송하지 않기 때문에 보안과 성능 면에서 장점을 가집니다. 웹 저장소는 로컬 저장소(Local Storage)와 세션 저장소(Session Storage)로 나뉩니다.
필요성:
- 보안성: 데이터를 서버로 보내지 않기 때문에 보안 위협 감소.
- 용량: 쿠키보다 훨씬 큰 용량의 데이터를 저장 가능.
- 성능: 서버 요청 없이 클라이언트 측에서 데이터를 처리하여 성능 향상.
로컬 저장소(Local Storage)와 세션 저장소(Session Storage)
로컬 저장소(Local Storage): 브라우저가 닫히거나 시스템이 재부팅되어도 데이터가 지속적으로 유지됩니다.
세션 저장소(Session Storage): 브라우저가 닫히면 데이터가 사라집니다. 탭마다 독립된 저장소를 가집니다.
예제: 로컬 저장소와 세션 저장소의 차이
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로컬 저장소와 세션 저장소</title>
<script>
// 로컬 저장소에 데이터 저장
localStorage.setItem('localKey', '로컬 저장소에 저장된 데이터');
// 세션 저장소에 데이터 저장
sessionStorage.setItem('sessionKey', '세션 저장소에 저장된 데이터');
</script>
</head>
<body>
<h1>로컬 저장소와 세션 저장소의 차이</h1>
</body>
</html>
데이터 저장과 조회(Data Storage and Retrieval)
웹 저장소를 사용하여 데이터를 저장하고 조회하는 방법은 간단합니다. setItem 메서드를 사용하여 데이터를 저장하고, getItem 메서드를 사용하여 데이터를 조회할 수 있습니다.
예제: 로컬 저장소 데이터 저장 및 조회
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로컬 저장소 데이터 저장 및 조회</title>
<script>
// 데이터 저장
function saveData() {
const key = document.getElementById('key').value;
const value = document.getElementById('value').value;
localStorage.setItem(key, value);
alert('데이터가 저장되었습니다.');
}
// 데이터 조회
function loadData() {
const key = document.getElementById('key').value;
const value = localStorage.getItem(key);
alert(`저장된 데이터: ${value}`);
}
</script>
</head>
<body>
<h1>로컬 저장소 데이터 저장 및 조회</h1>
<input type="text" id="key" placeholder="키 입력">
<input type="text" id="value" placeholder="값 입력">
<button onclick="saveData()">저장</button>
<button onclick="loadData()">조회</button>
</body>
</html>
예제: 세션 저장소 데이터 저장 및 조회
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>세션 저장소 데이터 저장 및 조회</title>
<script>
// 데이터 저장
function saveData() {
const key = document.getElementById('key').value;
const value = document.getElementById('value').value;
sessionStorage.setItem(key, value);
alert('데이터가 저장되었습니다.');
}
// 데이터 조회
function loadData() {
const key = document.getElementById('key').value;
const value = sessionStorage.getItem(key);
alert(`저장된 데이터: ${value}`);
}
</script>
</head>
<body>
<h1>세션 저장소 데이터 저장 및 조회</h1>
<input type="text" id="key" placeholder="키 입력">
<input type="text" id="value" placeholder="값 입력">
<button onclick="saveData()">저장</button>
<button onclick="loadData()">조회</button>
</body>
</html>
웹 저장소의 실습 예제(Web Storage Practice Examples)
예제: 웹 저장소를 활용한 간단한 메모장
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 저장소를 활용한 간단한 메모장</title>
<script>
// 페이지 로드 시 저장된 메모 불러오기
window.onload = function() {
const savedMemo = localStorage.getItem('memo');
if (savedMemo) {
document.getElementById('memo').value = savedMemo;
}
};
// 메모 저장
function saveMemo() {
const memo = document.getElementById('memo').value;
localStorage.setItem('memo', memo);
alert('메모가 저장되었습니다.');
}
// 메모 삭제
function clearMemo() {
localStorage.removeItem('memo');
document.getElementById('memo').value = '';
alert('메모가 삭제되었습니다.');
}
</script>
</head>
<body>
<h1>웹 저장소를 활용한 간단한 메모장</h1>
<textarea id="memo" rows="10" cols="30" placeholder="메모를 입력하세요"></textarea><br>
<button onclick="saveMemo()">저장</button>
<button onclick="clearMemo()">삭제</button>
</body>
</html>
웹 저장소는 로컬 저장소와 세션 저장소를 통해 클라이언트 측에 데이터를 저장하는 강력한 기능을 제공합니다. 데이터를 손쉽게 저장하고 조회할 수 있으며, 성능과 보안 면에서도 우수한 장점을 갖추고 있습니다. 다양한 웹 애플리케이션에서 웹 저장소를 활용하여 사용자 경험을 향상시킬 수 있습니다.