JS LAB
    JS 7.4 · 7부. 실무 준비

    브라우저 저장소

    localStorage 로 새로 고침 뒤에도 값을 남깁니다.

    예상 학습 시간 15분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 중급
    개념 설명

    새로 고쳐도 남는 값

    변수에 담은 값은 화면을 새로 고치면 사라집니다. 4부에서 만든 To-Do 목록도 새로 고치면 비어 있습니다.

    localStorage 는 브라우저가 내주는 작은 저장소입니다. 서버 없이도 값을 남길 수 있습니다.

    • setItem(열쇠, 값) — 담습니다.
    • getItem(열쇠) — 꺼냅니다. 없으면 null 입니다.
    • removeItem(열쇠) · clear() — 지웁니다.

    값은 언제나 글자입니다. 이 한 가지가 실수의 대부분을 만듭니다.

    최소 예제 · 편집 가능

    담고 꺼내기

    script.js 
    localStorage.setItem("name", "홍길동");

console.log(localStorage.getItem("name"));
console.log(localStorage.getItem("없는열쇠"));

localStorage.removeItem("name");

console.log(localStorage.getItem("name"));
    출력
    홍길동 null null

    없는 열쇠를 꺼내면 오류가 아니라 null 입니다(3.6 의 객체와 다릅니다 — 그쪽은 undefined 였습니다).

    이 화면에서는 값이 남지 않습니다

    예제가 격리된 자리에서 실행되어 진짜 저장소를 쓸 수 없습니다. 대신 메모리에만 담기는 것을 끼워 두었습니다. 다시 실행하면 비어 있습니다.

    실제 페이지에서는 새로 고쳐도, 브라우저를 껐다 켜도 남습니다. 아래 코드를 실제 페이지에 옮겨 확인해 보세요.

    상세 사용법

    글자만 담깁니다

    script.js 
    localStorage.setItem("count", 10);

const count = localStorage.getItem("count");

console.log(count);
console.log(typeof count);
console.log(count + 1);
console.log(Number(count) + 1);
    출력
    10 string 101 11

    숫자를 담아도 꺼내면 글자입니다. 1.4 에서 본 그대로 "10" + 1 이 "101" 이 됩니다. 계산에 쓰려면 Number 로 바꿉니다.

    상세 사용법

    객체와 배열은 JSON 으로

    글자만 담기므로 3.8 의 JSON.stringify 로 바꿔 담고, 꺼낼 때 JSON.parse 로 되돌립니다.

    script.js 
    const settings = { theme: "dark", fontSize: 14 };

localStorage.setItem("settings", JSON.stringify(settings));

const saved = JSON.parse(localStorage.getItem("settings"));

console.log(saved.theme);
console.log(saved.fontSize + 2);
console.log(localStorage.getItem("settings"));
    출력
    dark 16 {"theme":"dark","fontSize":14}

    되돌린 뒤에는 보통의 객체이므로 숫자도 숫자로 돌아옵니다.

    상세 사용법

    처음 방문한 사람도 다루기

    처음 방문하면 아무것도 없습니다. null 을 그대로 JSON.parse 하면 null 이 나와, 그다음 줄에서 오류가 납니다.

    script.js 
    const raw = localStorage.getItem("todos");
const todos = raw ? JSON.parse(raw) : [];

console.log(todos);
console.log(todos.length);

todos.push("연필 사기");
localStorage.setItem("todos", JSON.stringify(todos));

console.log(JSON.parse(localStorage.getItem("todos")));
    출력
    [] 0 ["연필 사기"]

    담기 전에 꺼내는 코드가 먼저 돕니다. 없을 때 무엇을 쓸지 늘 정해 두세요.

    상세 사용법

    전부 보기와 지우기

    script.js 
    localStorage.setItem("a", "1");
localStorage.setItem("b", "2");

console.log(localStorage.length);
console.log(localStorage.key(0));

localStorage.clear();

console.log(localStorage.length);
    출력
    2 a 0

    clear() 는 그 사이트의 값을 모두 지웁니다. 내가 담지 않은 것까지 지워지므로, 대개는 removeItem 으로 하나씩 지웁니다.

    비슷한 것으로 sessionStorage 가 있습니다. 쓰는 방법은 같고 탭을 닫으면 사라진다는 점만 다릅니다.

    흔한 실수

    처음에 자주 걸리는 것

    1. 꺼낸 값을 숫자로 압니다

    언제나 글자입니다. Number 로 바꾸거나 JSON.parse 로 되돌리세요.

    2. 없을 때를 다루지 않습니다

    처음 방문한 사람에게는 아무것도 없습니다. JSON.parse(null) 은 null 을 돌려주고, 그다음 줄에서 오류가 납니다. 

    TypeError: Cannot read properties of null (reading 'length')
    3. 민감한 값을 담습니다

    localStorage 는 같은 사이트의 어떤 코드든 읽을 수 있습니다. 비밀번호나 결제 정보를 담지 마세요. 화면 설정이나 임시 목록처럼 새어 나가도 되는 것만 담습니다.

    실습 문제

    직접 해보기

    1. 방문 횟수 세기 난이도 하

    방문할 때마다 1씩 늘어나는 값을 담고 출력하세요. 처음이면 1 입니다.

    꺼낸 값이 null 일 수 있습니다. ?? 로 기본값을 주면 됩니다(6.5).
    const count = Number(localStorage.getItem("visits") ?? 0) + 1; localStorage.setItem("visits", count); console.log(`${count}번째 방문입니다`);
    2. 담고 꺼내는 도우미 만들기 난이도 중

    객체를 담고 꺼내는 함수 둘을 만드세요. 꺼낼 때 값이 없거나 망가져 있으면 기본값을 돌려줍니다.

    function save(key, value) { localStorage.setItem(key, JSON.stringify(value)); } function load(key, fallback) { const raw = localStorage.getItem(key); if (raw === null) return fallback; try { return JSON.parse(raw); } catch { return fallback; } } save("settings", { theme: "dark" }); console.log(load("settings", {})); console.log(load("없는열쇠", { theme: "light" }));
    요약

    이 단원의 정리

    • localStorage 는 서버 없이 값을 남깁니다. 새로 고쳐도 남습니다.
    • 값은 언제나 글자입니다. 객체·배열은 JSON 으로 바꿔 담습니다.
    • 없으면 null 입니다. 처음 방문한 사람을 늘 생각하세요.
    • clear() 는 그 사이트의 값을 모두 지웁니다.
    • 민감한 값은 담지 않습니다. 같은 사이트의 어떤 코드든 읽을 수 있습니다.