안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊
23일차 포스팅에서는 DOM 조작 기술을 총동원하여 멋진 인터랙티브 투두 리스트를 만들었습니다. 직접 할 일을 추가하고 삭제하는 기능까지 완벽했죠.
하지만 치명적인 단점이 하나 있었습니다. 열심히 할 일을 적어두고 브라우저를 새로고침(F5)하면, 모든 데이터가 흔적도 없이 사라진다는 것이었죠. 변수에 저장된 데이터는 프로그램이 종료되면(페이지가 바뀌면) 메모리에서 지워지기 때문입니다. 오늘은 이 데이터를 브라우저 내부에 안전하게 보관하는 LocalStorage에 대해 알아보겠습니다.
1. 도입
웹 사이트를 이용하다 보면 로그인 정보가 유지되거나, '다크 모드' 설정이 껐다 켜도 그대로 남아있는 것을 본 적이 있을 것입니다. 서버(DB)에 저장하는 경우도 있지만, 간단한 정보는 사용자 브라우저의 LocalStorage라는 곳에 저장할 수 있습니다. 이것은 마치 브라우저가 제공하는 작은 개인 금고와 같습니다.
2. 개념 설명: 브라우저 속의 금고, LocalStorage
LocalStorage는 웹 브라우저가 가지고 있는 데이터 저장소입니다.
특징
- 반영구적 저장: 브라우저 창을 닫거나 컴퓨터를 껐다 켜도 데이터가 사라지지 않습니다. (사용자가 직접 지우기 전까지 유지됨)
- Key-Value 구조: 데이터를 저장할 때는 열쇠(Key)와 내용물(Value)을 한 쌍으로 묶어서 저장합니다. 나중에 열쇠 이름만 대면 내용물을 꺼내줍니다.
- 문자열만 저장: 원칙적으로 글자(String) 형태의 데이터만 저장할 수 있습니다.
핵심 메서드
- localStorage.setItem('키', '값'): 데이터를 저장합니다.
- localStorage.getItem('키'): 데이터를 꺼내옵니다.
- localStorage.removeItem('키'): 데이터를 삭제합니다.
3. 예시 코드: 내 이름 기억하기
사용자가 이름을 입력하고 '저장' 버튼을 누르면, 새로고침을 해도 브라우저가 그 이름을 기억하고 있는 기능을 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>이름 기억하기 (새로고침 테스트)</h2>
<input type="text" id="nameInput" placeholder="이름을 입력하세요">
<button id="saveBtn">저장하기</button>
<button id="loadBtn">불러오기</button>
<button id="deleteBtn">삭제하기</button>
<h3>저장된 이름: <span id="displayArea">없음</span></h3>
<script>
const input = document.getElementById("nameInput");
const display = document.getElementById("displayArea");
const saveBtn = document.getElementById("saveBtn");
const loadBtn = document.getElementById("loadBtn");
const delBtn = document.getElementById("deleteBtn");
// [1] 저장하기 (setItem)
saveBtn.addEventListener("click", function() {
const name = input.value;
// "userName"이라는 열쇠로 입력받은 이름을 저장합니다.
localStorage.setItem("userName", name);
alert("저장되었습니다! 새로고침 해보세요.");
});
// [2] 불러오기 (getItem)
loadBtn.addEventListener("click", function() {
// "userName"이라는 열쇠로 저장된 값을 꺼내옵니다.
const savedName = localStorage.getItem("userName");
if (savedName) { // 저장된 값이 있다면
display.textContent = savedName;
} else {
display.textContent = "저장된 기록이 없습니다.";
}
});
// [3] 삭제하기 (removeItem)
delBtn.addEventListener("click", function() {
localStorage.removeItem("userName");
display.textContent = "없음";
alert("삭제되었습니다.");
});
// (팁) 페이지가 열리자마자 자동으로 불러오기
// 아래 주석을 풀면 버튼을 안 눌러도 자동으로 이름을 띄웁니다.
// const autoLoad = localStorage.getItem("userName");
// if(autoLoad) display.textContent = autoLoad;
</script>
</body>
</html>
결과 화면 (브라우저):
- 입력창에 "홍길동"을 적고 [저장하기]를 누릅니다.
- 브라우저를 새로고침(F5) 합니다. (입력창은 비워집니다.)
- [불러오기] 버튼을 누릅니다.
- 신기하게도 "저장된 이름: 홍길동"이 출력됩니다.
4. 코드 설명: 금고 사용법
- localStorage.setItem("userName", name):
- setItem은 금고에 넣는 명령어입니다.
- 첫 번째 재료 "userName"은 우리가 붙인 라벨(Key)입니다. 나중에 이 이름으로 데이터를 찾습니다.
- 두 번째 재료 name은 실제 저장할 값(Value)입니다.
- localStorage.getItem("userName"):
- getItem은 금고에서 꺼내는 명령어입니다.
- "userName"이라는 라벨을 가진 데이터를 달라고 요청합니다. 만약 저장된 게 없으면 null(없음)을 반환합니다.
- localStorage.removeItem("userName"):
- 해당 라벨의 데이터를 영구적으로 파기합니다.
5. 마무리
오늘은 24일차 포스팅으로, 브라우저가 꺼져도 데이터를 기억하는 LocalStorage의 기초 사용법을 배웠습니다. 이제 여러분의 웹 페이지는 사용자의 흔적을 기억할 수 있는 지능을 갖추게 되었습니다.
그런데 LocalStorage에는 치명적인 제약이 하나 있습니다. 바로 "문자열"만 저장할 수 있다는 점입니다. 우리가 만든 투두 리스트는 배열(Array) 형태인데, 이걸 어떻게 저장해야 할까요?
다음 25일차 포스팅에서는 배열이나 객체 같은 복잡한 데이터를 LocalStorage에 저장할 수 있게 해주는 JSON.stringify와 JSON.parse에 대해 알아보겠습니다. 투두 리스트 완전 정복이 머지않았습니다!
오늘도 새로운 기술을 익히느라 고생 많으셨습니다. 다음 시간에 만나요! 👋
'IT > Javascript' 카테고리의 다른 글
| JavaScript: 투두 리스트 완성! LocalStorage와 JSON으로 데이터 영구 저장하기 💾 (0) | 2026.01.14 |
|---|---|
| JavaScript: 객체와 배열 저장하기! JSON.stringify와 JSON.parse 완벽 정리 📦 (0) | 2026.01.07 |
| JavaScript: DOM 총정리! 나만의 인터랙티브 투두 리스트(To-Do List) 만들기 📝 (0) | 2025.12.25 |
| JavaScript: HTML 요소 삭제하기 (remove, removeChild) 기초 🗑️ (1) | 2025.12.21 |
| JavaScript: HTML 요소 동적 생성 (createElement, appendChild) 기초 🏗️ (0) | 2025.12.18 |