[JavaScript] JavaScript 기초 8 (localStorage, sessionStorage, Cookie)

localStorage

• 브라우저가 제공하는 웹 스토리지 기능 중 하나로, 자바스크립트를 통해 키/값 형태의 데이터를 브라우저에 영구적으로 저장할 수 있는 저장소.
• 브라우저별로 약 5MB 내외 저장 제한이 있음
• 문자열만 저장 가능
• 같은 도메인에서만 접근 가능
• 민감한 정보(비밀번호, 토큰 등)는 저장하면 안됨

데이터 저장하는 방법

localStorage.setItem("key", "value")

데이터 불러오는 방법

const value = localStorage.getItem("key")

데이터 삭제하는 방법  /  모든 데이터 삭제하는 방법

localStorage.removeItem("key")
localStorage.clear()

localStorage를 이용한 테마 변경

<button onclick="toggleTheme()">테마 변경</button>
<p>현재 테마: <span id="themeText"></span></p>

<script>
    const body = document.body

    function applyTheme(theme) {
        body.style.backgroundColor = theme === "dark" ? "#222" : "#fff"
        body.style.color = theme === "dark" ? "#fff" : "#000"
        document.getElementById("themeText").innerHTML = theme
    }

    function toggleTheme() {
        const current = localStorage.getItem("theme") || "white"
        const next = current === "white" ? "dark" : "white"
        localStorage.setItem("theme", next)
        applyTheme(next)
    }

    applyTheme(localStorage.getItem("theme") || "white")
</script>

sessionStorage

• 브라우저가 제공하는 웹 스토리지 중 하나로, 탭(세션) 단위로 데이터를 임시 저장하는 저장소
• 페이지를 새로고침해도 데이터는 유지되지만, 브라우저 탭이나 창을 닫는 순간 자동으로 삭제되는 것이 특징이며, 같은 사이트라도 다른 탭과 데이터가 공유되지 않음
• 저장 용량은 약 5MB
• 문자열만 저장 가능
• 보안이 필요한 민감한 정보는 저장하지 않는 것이 원칙

데이터 저장하는 방법

sessionStorage.setItem("key", "value")

데이터 불러오는 방법

const value = sessionStorage.getItem("key")

데이터 삭제하는 방법 / 모든 데이터 삭제하는 방법

sessionStorage.removeItem("key")
sessionStorage.clear()

Cookie

• 웹 브라우저가 사용자 정보를 작은 텍스트 데이터 형태로 저장해 두었다가, 이후 같은 웹사이트에 요청을 보낼 때마다 자동으로 서버에 함께 전송하는 저장 방식
• 저장 용량이 약 4KB로 매우 작고, 모든 요청에 포함되어 전송되기 때문에 보안과 성능 측면에서 주의가 필요함.

쿠키 저장하기

document.cookie = "userid=apple"

만료 시간 설정하기

const date = new Date() // 2026-06-23 00:00:00
date.setDate(date.getDate() + 7) // 2026-06-23 + 7, 7일 후 => 2026-06-30
document.cookie = "userid=apple; expires=" + date.toUTCString()

쿠키 읽기

console.log(document.cookie)

쿠키 삭제

expires 값을 과거 날짜로 설정하면 자동으로 삭제됨