안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 외부 소식을 가져오는 법을 배웠죠? 그런데 공들여 가져온 정보나 우리가 정성껏 만든 설정이 브라우저를 새로고침하면 사라져 버린다면 너무 슬플 거예요. 오늘은 우리 웹사이트의 기억력을 책임지는 마법의 비밀 창고, LocalStorage(로컬스토리지)를 배워볼게요!
1. LocalStorage: 우리 브라우저 전용 보물 상자
LocalStorage는 여러분의 컴퓨터나 태블릿 브라우저 안에 있는 작은 창고예요. 여기에 물건(데이터)을 넣어두면 브라우저를 완전히 꺼도, 심지어 컴퓨터를 다시 켜도 데이터가 그대로 남아있답니다.
하지만 창고가 아주 크지는 않아서, 꼭 필요한 보물(사용자 이름, 테마 설정, 오늘 받은 칭찬 스티커 개수 등)만 넣어두는 것이 좋아요!
2. 창고를 사용하는 두 가지 마법 주문
- setItem (넣기): “창고야, 이 보물을 보관해줘!”라고 말하며 열쇠(이름)와 함께 보물을 넣어요.
- getItem (꺼내기): “아까 그 열쇠로 보물을 꺼내줘!”라고 말하며 데이터를 가져와요.
3. 실전 마법: 우리 아이 닉네임 기억하기
한 번 입력한 이름을 계속 기억하는 똑똑한 로그인 기능을 만들어 볼까요?
<script setup>
import { ref, onMounted } from 'vue';
const userName = ref('');
// 1. 이름을 창고에 저장하는 마법
const saveName = () => {
localStorage.setItem('myChildName', userName.value);
alert('비밀 창고에 이름을 저장했어요!');
};
// 2. 성 문이 열릴 때 창고에서 이름을 꺼내와요
onMounted(() => {
const savedValue = localStorage.getItem('myChildName');
if (savedValue) {
userName.value = savedValue;
}
});
</script>
<template>
<div>
<input v-model="userName" placeholder="이름을 입력하세요">
<button @click="saveName">마법 창고에 저장!</button>
<p>다시 돌아온 걸 환영해요, {{ userName }} 마법사님!</p>
</div>
</template>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들에게 이 창고를 ‘학교 사물함’에 비유해 주세요. 학교가 끝나고 집에 와도 사물함에 넣어둔 책은 다음 날 그대로 있는 것과 같다고요. 아이와 함께 ‘칭찬 스티커’ 개수를 이 창고에 저장하게 해보세요. 브라우저를 켤 때마다 쌓여있는 스티커를 보며 아이들이 코딩의 유용함과 성취감을 동시에 느낄 수 있습니다.
마치며: 기억력이 좋아진 우리 집 마법 성
이제 우리 웹사이트는 사용자를 잊지 않는 똑똑한 성이 되었습니다! 저장하는 법을 배웠으니 활용할 곳이 정말 많겠죠? 다음 시간에는 **’마법의 암호 풀기(JSON parsing)’**라는 주제로, 복잡한 보물 꾸러미를 창고에 통째로 넣고 꺼내는 더 고급 기술을 배워볼게요.
