🗄️ 레슨

localStorage — 일단 내 브라우저에

① 오늘의 미션

손님이 담은 장바구니, 어디에 둘까?

'우리동네 반찬가게' 첫 페이지가 떴어요. 이제 손님이 포기김치를 장바구니에 담으면 그게 어딘가 저장돼야 해요. 아직 서버도 없는데… 가장 간단한 첫 저장소가 뭘까요?

오늘은 localStorage — 손님 브라우저 안의 작은 메모장에 장바구니를 담아봅니다. 오른쪽 터미널에서 직접 확인해요.

설명을 따라 진행하면, 여기서 직접 쳐보게 돼요 👇

~/my-shop

$ _

📚 「localStorage — 일단 내 브라우저에」 레슨 내용 전체 텍스트로 훑어보기

손님이 담은 장바구니, 어디에 둘까?

오늘은 localStorage — 손님 브라우저 안의 작은 메모장에 장바구니를 담아봅니다. 오른쪽 터미널에서 직접 확인해요.

손님 브라우저 안에도 작은 메모장이 있다면?

맞아요. localStorage는 손님 브라우저 안의 작은 메모장이에요. 서버 없이도 장바구니에 담은 상품 같은 걸 바로 저장할 수 있죠. 👇

우리동네 반찬가게 데이터를 어디 둘지, 두 가지를 나란히 보세요.

📒 localStorage: 손님 브라우저에만 저장돼요. 장바구니·최근 본 상품엔 딱.
단, 이 브라우저에서 그 손님만 보여요.

🗄️ 서버 DB: 멀리 있는 서버에 저장돼 다른 사람·다른 기기에서도 같이 봐요.
주문 내역·전체 상품 목록처럼 공유 데이터에 필요해요.

Claude에게 장바구니를 브라우저에 저장하게 시켜요. 코드 한 줄 안 짜도 돼요.

장바구니에 담은 상품을 localStorage에 저장하게 해줘 — 장바구니를 브라우저에 저장하도록 부탁해요 (Claude와 대화)

이제 손님이 포기김치를 담으면, 그 정보가 브라우저 메모장(localStorage)에 적혀요.

브라우저 콘솔(F12)에서 localStorage.getItem("cart") 를 쳐보려 해요.
방금 포기김치를 담았다면, 무엇이 나올까요?

맞아요. localStorage는 이름표(key)에 글자 값을 적어두는 메모장이라, 담은 장바구니가 텍스트로 그대로 나와요. 직접 확인해볼까요? 👇

브라우저 콘솔에서 메모장 내용을 꺼내봐요. getItem = 이름표로 값 꺼내기.

localStorage.getItem("cart") — cart 라는 이름표에 저장된 값을 꺼내요

잘 들어있죠? 그런데 이 값은 지금 이 브라우저 안에만 있다는 게 핵심이에요.

'그 손님 브라우저 안'이라는 말이 힌트예요.

맞아요. localStorage 장바구니는 그 브라우저에만 갇혀 있어요. 기기를 옮겨도 장바구니가 따라오게 하려면 서버 DB가 필요하죠. (캐시·기록을 지우면 사라질 수도 있어요.)

localStorage는 짝꿍 명령으로 써요. 꺼내기는 getItem, 적기는 무엇일까요? 빈칸을 채워보세요.

좋아요! setItem(이름표, 값)으로 적고, getItem(이름표)로 꺼내요. removeItem으로 지우고요. 이름표-값 한 쌍이 메모장 한 줄이에요.

'다른 기기에선 안 보인다'를 눈으로 확인해봐요. Claude에게 시크릿 창에서 열어보라고 시켜요.

지금 가게를 시크릿 창에서도 열어서 장바구니가 어떻게 보이는지 알려줘 — 방금 만든 가게를 시크릿 창(새 브라우저처럼)에서 열어달라고 해요

보이죠? 같은 사이트라도 브라우저/기기가 다르면 메모장도 다른 메모장이에요. 그래서 '공유 데이터'엔 부족해요.

손님이 장바구니를 쓰는 흐름을 순서대로 맞춰보세요. (↑↓로 정렬)

정확해요! 담기 → 저장(set) → 다시 불러오기(get) → 비우기(remove). 이 한 바퀴가 localStorage 장바구니의 전부예요.

주문 내역은 여러 기기·관리자와 공유돼야 하죠.

맞아요. 여러 기기·관리자와 공유하거나 영구히 남아야 하는 데이터는 localStorage로 부족해요. 다음 레슨들의 구글시트·Supabase 같은 진짜 저장소로 졸업할 때죠.

한 줄로

localStorage는 가장 간단한 저장 — 손님 브라우저 안 메모장이에요. 빠르지만 그 손님만, 이 기기에서만.

다음 레슨에서

장바구니는 localStorage로 충분했지만, 주문 내역은 사장님도 봐야 해요. 다음 레슨에서 구글 시트를 주문 창고(DB)처럼 써서, 손님 주문이 자동으로 한 줄씩 쌓이게 만들어봐요. 가게가 한 단계 자랍니다. 🌱