HTML 기초 강의 14편: 로컬 스토리지와 세션 스토리지

Study/HTML

HTML 기초 강의 14편: 로컬 스토리지와 세션 스토리지

wawManager 2024. 11. 14. 12:00

728x90

1. 웹 저장소(Web Storage)란?

웹 저장소는 HTML5에서 추가된 기능으로, 사용자 브라우저에 데이터를 저장할 수 있게 합니다. 웹 저장소는 주로 로컬 스토리지와 세션 스토리지로 나뉘며, 두 방식 모두 쿠키보다 많은 데이터를 저장할 수 있고, 서버로 데이터를 전송하지 않습니다.

로컬 스토리지(Local Storage): 브라우저에 영구적으로 저장되며, 브라우저를 종료해도 데이터가 남아 있습니다.
세션 스토리지(Session Storage): 세션이 유지되는 동안만 저장되며, 탭이나 창을 닫으면 데이터가 삭제됩니다.

2. 로컬 스토리지 사용하기

로컬 스토리지는 localStorage 객체를 사용하여 접근하며, 주로 setItem, getItem, removeItem, clear 메서드로 데이터를 관리합니다.

데이터 저장하기: setItem

localStorage.setItem('username', '홍길동');  // 'username'이라는 키로 '홍길동'을 저장

데이터 가져오기: getItem

const username = localStorage.getItem('username');
console.log(username);  // '홍길동' 출력

데이터 삭제하기: removeItem

localStorage.removeItem('username');  // 'username' 키로 저장된 데이터 삭제

모든 데이터 삭제하기: clear

localStorage.clear();  // 모든 로컬 스토리지 데이터 삭제

3. 세션 스토리지 사용하기

세션 스토리지는 sessionStorage 객체를 사용하여 접근하며, 로컬 스토리지와 사용 방법은 동일합니다. 다만, 탭이 닫힐 때 데이터가 사라지는 점이 다릅니다.

데이터 저장하기

sessionStorage.setItem('sessionKey', '세션 데이터');

데이터 가져오기

const sessionData = sessionStorage.getItem('sessionKey');
console.log(sessionData);  // '세션 데이터' 출력

데이터 삭제하기

sessionStorage.removeItem('sessionKey');

모든 데이터 삭제하기

sessionStorage.clear();

4. 로컬 스토리지와 세션 스토리지 예제

아래는 로컬 스토리지와 세션 스토리지로 데이터를 저장하고, 화면에 표시하는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>웹 저장소 예제</title>
</head>
<body>
    <h2>웹 저장소 예제</h2>

    <!-- 로컬 스토리지 -->
    <input type="text" id="localInput" placeholder="로컬 데이터 입력">
    <button onclick="saveLocal()">로컬 저장</button>
    <button onclick="showLocal()">로컬 보기</button>
    <p id="localOutput"></p>

    <!-- 세션 스토리지 -->
    <input type="text" id="sessionInput" placeholder="세션 데이터 입력">
    <button onclick="saveSession()">세션 저장</button>
    <button onclick="showSession()">세션 보기</button>
    <p id="sessionOutput"></p>

    <script>
        // 로컬 스토리지 저장
        function saveLocal() {
            const localData = document.getElementById('localInput').value;
            localStorage.setItem('localData', localData);
            alert('로컬 스토리지에 저장되었습니다.');
        }

        // 로컬 스토리지 보기
        function showLocal() {
            const localData = localStorage.getItem('localData');
            document.getElementById('localOutput').innerText = localData ? `로컬 데이터: ${localData}` : '저장된 로컬 데이터가 없습니다.';
        }

        // 세션 스토리지 저장
        function saveSession() {
            const sessionData = document.getElementById('sessionInput').value;
            sessionStorage.setItem('sessionData', sessionData);
            alert('세션 스토리지에 저장되었습니다.');
        }

        // 세션 스토리지 보기
        function showSession() {
            const sessionData = sessionStorage.getItem('sessionData');
            document.getElementById('sessionOutput').innerText = sessionData ? `세션 데이터: ${sessionData}` : '저장된 세션 데이터가 없습니다.';
        }
    </script>
</body>
</html>

코드 설명

saveLocal(): 입력된 데이터를 로컬 스토리지에 저장합니다.
showLocal(): 로컬 스토리지에서 데이터를 가져와 화면에 표시합니다.
saveSession(): 입력된 데이터를 세션 스토리지에 저장합니다.
showSession(): 세션 스토리지에서 데이터를 가져와 화면에 표시합니다.

5. 로컬 스토리지와 세션 스토리지의 차이점

기능로컬 스토리지 (Local Storage)세션 스토리지 (Session Storage)

데이터 유지	영구적 (사용자가 지우기 전까지)	브라우저 탭 종료 시 삭제
용량	약 5~10MB (브라우저에 따라 다름)	약 5MB
사용 예시	사용자 설정, 장바구니	페이지 내 임시 데이터 저장
데이터 접근 범위	도메인 내 모든 탭	탭 내에서만 유효

6. 로컬 스토리지와 세션 스토리지의 활용 예시

1) 사용자 설정 저장

웹 사이트의 테마 설정, 글꼴 크기 등의 사용자 설정을 로컬 스토리지에 저장하여, 재방문 시에도 설정이 유지되도록 할 수 있습니다.

2) 로그인 세션 관리

세션 스토리지는 사용자가 로그인한 동안의 정보를 저장하여, 새 탭을 열 때마다 로그인 상태를 유지할 필요가 없도록 할 수 있습니다.

3) 장바구니 데이터

쇼핑몰에서는 장바구니 데이터를 로컬 스토리지에 저장하여, 사용자가 페이지를 새로고침하거나 재방문해도 장바구니 내용을 확인할 수 있도록 할 수 있습니다.

요약

이번 강의에서는 HTML5의 로컬 스토리지와 세션 스토리지를 사용해 사용자 데이터를 브라우저에 저장하고 관리하는 방법을 배웠습니다. 이러한 웹 저장소를 활용하면 웹 페이지가 더욱 동적으로 사용자에게 맞춤형 경험을 제공할 수 있습니다. 다음 강의에서는 고급 HTML5 기능과 최신 API를 활용한 웹 개발 기법을 소개하겠습니다.

728x90