이번 포스팅에서는 HTML5의 새로운 특징 중 하나인 지역 저장소와 관련 API에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지에서 데이터를 효율적으로 저장하고 관리하는 방법을 자세히 학습해 봅시다.
자동목차
이론: 지역 저장소란?
HTML5의 지역 저장소(Local Storage)는 웹 브라우저에 데이터를 저장하는 기능입니다. 이를 통해 웹 페이지가 사용자의 정보를 저장하고, 이후에 다시 불러올 수 있습니다. 지역 저장소는 쿠키와 비슷하지만, 저장 용량이 더 크고 서버로 자동 전송되지 않는다는 차이점이 있습니다.
실습: 지역 저장소 사용하기
아래의 코드는 지역 저장소를 이용하여 사용자의 이름을 저장하고 불러오는 간단한 웹 페이지의 예시입니다.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="name" placeholder="Enter your name">
<button onclick="saveName()">Save</button>
<button onclick="loadName()">Load</button>
<script>
function saveName() {
var name = document.getElementById('name').value;
localStorage.setItem('name', name);
}
function loadName() {
var name = localStorage.getItem('name');
alert('Your name is ' + name);
}
</script>
</body>
</html>
3. 코드 설명
- localStorage.setItem(): 이 함수는 지역 저장소에 데이터를 저장합니다. 첫 번째 인자는 데이터의 이름, 두 번째 인자는 저장할 값입니다.
- localStorage.getItem(): 이 함수는 지역 저장소에서 데이터를 불러옵니다. 인자는 불러올 데이터의 이름입니다.
4. 마무리
HTML5의 지역 저장소는 웹 페이지가 사용자의 데이터를 효율적으로 저장하고 관리하는 데 매우 유용합니다. 이번 포스팅을 통해 지역 저장소의 기본적인 사용 방법을 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.