HTML5 로컬 & 세션 스토리지

⏰ 2024.11.21 (D+31)

1. localStorage 방문 횟수 기록 및 표시 & 초기화

📌 웹 스토리지란?
- 웹 스토리지는 브라우저가 데이터를 로컬에 저장할 수 있도록 지원하는 기능
- 로컬 스토리지(Local Storage)는 데이터를 브라우저에 영구히 저장
- 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 유지

📁 WebStorage21_1.html

1. 주요기능

1) 방문 횟수 기록 및 표시🔢

• 첫 방문 시:
  - "처음 방문 하셨군요"라는 메시지를 표시
  - 방문 횟수를 1로 설정해 로컬 스토리지(Local Storage)에 저장
• 재방문 시:
  - 로컬 스토리지에서 이전 방문 횟수를 가져와 +1 증가
  - 몇 번째 방문인지 화면에 표시

2) 방문 기록 초기화 버튼 ⚙️
- "로컬 스토리지 삭제" 버튼을 클릭하면 로컬 스토리지를 초기화
- 방문 기록을 0으로 처리

2. 코드 흐름

1) 웹 스토리지 지원 여부 확인✅
- 브라우저가 로컬 스토리지를 지원하는지 확인 후, 지원하면 방문 기록 기능을 실행

if (typeof Storage !== undefined) {
    // 로컬 스토리지 사용 가능
}

2) 방문 기록 읽기/쓰기 📒
- localStorage.getItem('counter')로 기존 방문 횟수 읽어오기
- 없으면(첫 방문), setItem('counter', 1)로 방문 횟수를 1로 저장
- 있으면 방문 횟수를 증가시키고 다시 저장

var counter = localStorage.getItem('counter');
//localStorage.getItem('counter')를 사용해 저장된 방문 횟수를 가져오기

✅첫방문:
localStorage.setItem('counter', 1);
//값이 null이기 때문에 방문 횟수를 1로 설정하고 로컬 스토리지에 저장

☑️재방문:
counter++;
localStorage.setItem('counter', counter);
//기존 값을 가져와 숫자를 1 증가시키고 다시 저장

🖥️ 화면에 방문 횟수 표시
spanNode.textContent = '처음 방문 하셨군요';
spanNode.textContent = counter + '번째 방문 하셨군요';
//방문 횟수에 따라 다른 메시지를 <span> 태그에 표시
//spanNode는 방문 횟수를 보여주는 HTML 요소

3) 초기화 버튼 ⚙️
- localStorage.clear()를 사용해 저장된 방문 기록을 삭제

function removeStorage() {
    localStorage.clear();
    spanNode.textContent = '방문 횟수가 초기화 되었습니다';
}
//"로컬 스토리지 삭제" 버튼 클릭 시 실행되는 함수
//localStorage.clear()를 사용해 저장된 모든 데이터를 삭제하고 방문 횟수를 초기화

3. HTML 구조 설명

<fieldset>
    <legend>웹 스토리지를 이용한 방문자 회원수 카운팅(로컬 스토리지)</legend>
    <span id="display" style='color:red;font-size:1.2em;font-weight: bold;'></span>
    <button onclick="removeStorage();">로컬 스토리지 삭제</button>
</fieldset>

• <span id="display">: 방문 횟수를 표시합니다.
• 초기에는 아무 내용도 표시 없음 ❌
• 버튼: 방문 기록을 초기화하는 버튼

4. 코드의 전체 동작 순서

1) 페이지 로드 시
- 브라우저가 로컬 스토리지를 지원하는지 확인
- localStorage에서 counter 값을 가져오기

2) 방문 횟수 처리
- 값이 없으면 1로 초기화(첫 방문)
- 값이 있으면 1 증가(재방문)
- 증가된 값을 다시 로컬 스토리지에 저장

3) 결과 표시
- 방문 횟수에 따라 적절한 메시지를 <span> 태그에 표시

4) "로컬 스토리지 삭제" 버튼
- 클릭 시 방문 기록을 초기화하고, 초기화 메시지를 화면에 표시

2. SessionStorage 방문 횟수 기록 및 표시 & 초기화

📌 Session Storage란?
- Session Storage는 브라우저가 닫힐 때까지 데이터를 유지하는 저장 공간
- 탭마다 별도의 저장 공간을 사용하므로, 다른 탭에서는 데이터가 공유 ❌

📁 WebStorage21_2.html

1. 주요기능

1) 방문 횟수 기록 및 표시🔢
- 방문자가 처음 방문했는지, 재방문했는지 확인하고 메시지를 출력
- 방문 횟수는 세션 스토리지(sessionStorage)에 저장

2) 세션 스토리지 초기화 ⚙️
- 버튼을 눌러 방문 기록(방문 횟수)을 초기화

2. 실행 과정

1) 브라우저가 Session Storage를 지원하는지 확인✅
- typeof Storage !== undefined를 통해 Session Storage를 지원하는 브라우저인지 확인
- 지원하지 않는 브라우저라면 아무 동작도 하지 않습니다.

// 세션 스토리지 확인
if (typeof Storage !== undefined) {  
    var spanNode = document.querySelector('#display');  
    var counter = sessionStorage.getItem('counter');
    }

2) 방문 횟수 관리 💼

• 첫 방문
  - 세션 스토리지에 counter라는 키가 없으면 첫 방문으로 간주
  - counter를 1로 초기화하고, 메시지로 "처음 방문하셨군요"를 표시

    if (counter === null) {  
        // 첫 방문
        sessionStorage.setItem('counter', 1);  
        spanNode.textContent = '처음 방문 하셨군요'; 
        }

• 재방문
  - 세션 스토리지에 저장된 counter 값을 불러와 1 증가
  - 증가된 값과 함께 방문 횟수를 메시지로 표시

else { // 재방문
        counter++;  
        sessionStorage.setItem('counter', counter);  
        spanNode.textContent = counter + '번째 방문 하셨군요';  
    }

3) 방문 기록 초기화 버튼 ⚙️
- 버튼을 누르면 sessionStorage.clear()로 모든 세션 스토리지 데이터를 삭제
- 화면에 "방문 횟수가 초기화되었습니다" 메시지를 표시

// 방문 기록 초기화 함수
function removeStorage() {  
    spanNode.textContent = '방문 횟수가 초기화 되었습니다';  
    sessionStorage.clear();  
}

3. Local Storage를 활용하여 사용자가 선택한 개인화 메뉴

💡 Local Storage와 Session Storage 차이
- Local Storage: 브라우저를 닫아도 데이터가 유지
- Session Storage: 브라우저 탭이 닫히면 데이터가 삭제

📁 WebStorage21_3.html

1. 주요기능

1) 메뉴 선택 및 제한 🔒
- 사용자가 최대 3개의 메뉴를 선택
- 선택된 메뉴는 화면에 빨간 글씨로 표시

2) 저장 및 유지 🗂️
- 선택된 메뉴를 Local Storage에 저장
- 페이지를 다시 로드해도 이전에 저장된 선택 상태가 유지

3) 선택 해제 및 초기화 ⚙️
- 선택한 메뉴를 해제하면 화면에서 바로 반영
- 새로운 메뉴를 저장하면 기존 저장 데이터는 초기화

2. 실행 흐름

1) 페이지 로드 시

• Local Storage에 저장된 메뉴가 있으면:
  - 저장된 메뉴를 배열 personalizer에 불러온다
  - 화면에 선택된 메뉴를 표시하고, 해당 체크박스를 체크 상태로 설정

2) 체크박스 클릭 시

• 선택한 경우:
  - 메뉴가 배열 personalizer에 추가되고 화면에 반영
  
  
• 해제한 경우:
  - 배열 personalizer에서 해당 메뉴를 제거하고 화면에서 반영
  
  
• 제한 조건:
  - 3개 이상 선택하려 하면 경고 메시지를 표시하고 선택 제한

3) 저장 버튼 클릭 시

• Local Storage 초기화:
  - 기존 데이터를 모두 삭제
  
  
• 현재 선택 상태 저장:
  - 선택된 메뉴를 MENU1, MENU2, MENU3 키 형식으로 Local Storage에 저장

3. 주요 코드 설명

1) 페이지 로드 시 초기화

if (localStorage.length !== 0) {
    for (var i = 0; i < localStorage.length; i++) {
        var value = localStorage.getItem(localStorage.key(i));
        personalizer.push(value); // 저장된 메뉴를 배열에 추가
    }
    personalDisplay(); // 메뉴 화면에 표시
    personalCheck();   // 체크박스 상태 유지
}

2) 체크박스 클릭 이벤트 처리

fieldsetNode.onclick = function (evt) {
    if (evt.target.nodeName !== 'INPUT') return;

    var checkedList = getCheckedList(); // 선택된 메뉴 가져오기
    if (checkedList.length > 3) { // 선택 제한
        alert('최대 3개까지만 선택할 수 있어요');
        return false; 
    }

    if (evt.target.checked) // 선택된 경우
        personalizer.push(evt.target.value);
    else // 해제된 경우
        delete personalizer[personalizer.indexOf(evt.target.value)];

    personalDisplay(); // 화면에 선택 상태 반영
};

3) 저장 버튼 클릭 이벤트 처리

buttonNode.onclick = function (evt) {
    localStorage.clear(); // 기존 데이터 삭제
    evt.stopPropagation(); // 이벤트 전파 방지

    var checkedList = getCheckedList(); // 선택된 메뉴 가져오기
    checkedList.forEach(function (checkbox, index) {
        localStorage.setItem(`MENU${index + 1}`, checkbox.value); // 저장
    });
};

4) 화면에 메뉴 표시

function personalDisplay() {
    var favoriteMenus = '';
    for (var index in personalizer) {
        favoriteMenus += personalizer[index] + "  ";
    }
    spanNode.innerHTML = favoriteMenus; // 빨간 글씨로 표시
}

4. Geolocation API 위도와 경도를 화면에 표시

📁 GeoLocation22_1.html

1. 주요기능

1) Geolocation API 사용 📕
- 사용자의 위치 정보(위도, 경도)를 얻기 위해 Geolocation API를 사용
- API를 통해 위치 정보가 제공되면 이를 화면에 표시

2) 위치 정보 실패 처리 🗑️
- 위치 정보를 가져오는데 실패하면 오류 메시지를 사용자에게 표시

2. 코드 설명

1) Geolocation API 지원 여부 확인
- navigator.geolocation이 존재하는지 확인
- Geolocation API를 지원하는 브라우저에서만 동작
- 현재 위치 정보를 얻기 위해 navigator.geolocation.getCurrentPosition() 메서드를 사용

if (navigator.geolocation) {
    spanNode.textContent = 'Geolocation API를 지원하는 브라우저';
    navigator.geolocation.getCurrentPosition(success, failure, options);
}

2) 현재 위치 정보 얻기
- options 객체를 사용하여 위치 정보 요청 시 설정할 여러 조건을 지정

var options = {
    enableHighAccuracy: true,  // 가능한 한 정확한 위치를 요청
    timeout: 3000,             // 최대 대기 시간(3초)
    maximumAge: 5000          // 이전 위치 정보가 5초 이내이면 재요청 안함
};

3) 위치 정보가 성공적으로 전달되었을 때
- 위치 정보가 성공적으로 제공되면, position.coords.latitude와 position.coords.longitude를 사용해 위도와 경도 표시

function success(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    spanNode.textContent = `위도:${lat}, 경도:${lng}`;
}

4) 위치 정보 요청이 실패했을 때
- 위치 정보 요청이 실패하면, 오류 코드에 따라 적절한 오류 메시지를 표시

function failure(error) {
    switch (error.code) {
        case 0: spanNode.textContent = '알 수 없는 오류'; break;
        case 1: spanNode.textContent = '사용자 허용 거부'; break;
        case 2: spanNode.textContent = '위치 확인 불가'; break;
        default: spanNode.textContent = error.message;
    }
}

5. Geolocation API 사용자의 현재 위치 추적

📁 GeoLocation22_2.html

1. 주요기능

1) 위치 추적 시작 🖲️
- "위치 추적 시작" 버튼을 클릭하면 위치 추적이 시작
- 위도와 경도가 5초마다 갱신되어 표시

2) 위치 추적 종료
- "위치 추적 종료" 버튼을 클릭하면 위치 추적이 중지
- "위치 추적 중지" 메시지가 표시

3) 위치 정보 갱신
- navigator.geolocation.watchPosition() 메서드를 사용하여 위치를 지속적으로 추적
- 위치 정보가 갱신될 때마다 화면에 새로 표시

2. 코드 설명

1) 위치 추적 시작
- navigator.geolocation.watchPosition() 메서드는 위치 추적을 시작
- 위치가 갱신될 때마다 위도와 경도를 화면에 표시
- options 객체를 사용하여 정확도와 타임아웃 등을 설정

function start() {
    if (navigator.geolocation) {  // Geolocation API 지원 여부 확인
        spanNode.textContent = 'Geolocation API를 지원하는 브라우저';
        var options = {
            enableHighAccuracy: true,  // 가능한 한 정확한 위치 요청
            timeout: 3000,             // 최대 대기 시간 (3초)
            maximumAge: 5000          // 5초 이내의 이전 위치 사용
        };
        // 위치 추적 시작 (5초마다 위치 갱신)
        watcher = navigator.geolocation.watchPosition(position => {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            spanNode.textContent = `위도: ${lat}, 경도: ${lng}`;
        }, function(error) {
            switch (error.code) {
                case 0: spanNode.textContent = '알 수 없는 오류'; break;
                case 1: spanNode.textContent = '사용자 허용 거부'; break;
                case 2: spanNode.textContent = '위치 확인 불가'; break;
                default: spanNode.textContent = error.message;
            }
        }, options);
    }
}

2) 위치 추적 종료
- navigator.geolocation.clearWatch(watcher) 메서드를 사용하여 위치 추적을 중지
- 중지 후에는 화면에 "위치 추적 중지" 메시지를 표시

function stop() {
    navigator.geolocation.clearWatch(watcher);  // 위치 추적 중지
    spanNode.textContent = '위치 추적 중지';
}

6. 카카오 지도 API 현재 위치 지도 표시

📁 GeoLocation22_3.html

1. 주요기능

1) 현재 위치 표시 🖲️
- Geolocation API를 사용하여 사용자의 현재 위치 확인
- 이를 카카오 지도에 마커로 표시

2) 주소로 위치 찾기 🗺️
- 사용자가 입력한 주소를 주소-좌표 변환을 통해 지도 상에 표시
- 입력한 주소에 해당하는 위치를 찾아서 지도의 중심 좌표를 그 위치로 이동하여 마커 표시

3) 줌 인/줌 아웃 🗄️
- 지도 레벨을 조정할 수 있는 range input을 통해 줌 인 및 줌 아웃 기능을 제공
- 사용자가 줌을 조정할 때마다 지도 레벨이 실시간으로 갱신

2. 코드 설명

1) 카카오 지도 생성 및 마커 표시
- getKakaoMap(): 현재 위치를 중심으로 지도를 생성
- setMarker(): 주어진 위도와 경도에 마커를 표시하고, 마커에 인포윈도우를 연결

// 지도 생성 함수
function getKakaoMap(lat, lng) {
    var container = document.getElementById('map'); // 지도를 담을 영역의 DOM
    var options = {
        center: new kakao.maps.LatLng(lat, lng), // 지도 중심 좌표
        level: range.value, // 지도 레벨
        mapTypeId: kakao.maps.MapTypeId.ROADMAP // 지도 타입
    };
    return new kakao.maps.Map(container, options); // 지도 객체 생성
}

// 마커 생성 함수
function setMarker(lat, lng, content) {
    var markerPosition = new kakao.maps.LatLng(lat, lng); // 마커 위치 설정
    var marker = new kakao.maps.Marker({
        position: markerPosition,
        clickable: true
    });

    var infowindow = new kakao.maps.InfoWindow({
        content: content,
        removable: true
    });

    // 마커에 마우스 이벤트 추가
    kakao.maps.event.addListener(marker, 'mouseover', () => infowindow.open(map, marker));
    kakao.maps.event.addListener(marker, 'mouseout', () => infowindow.close());

    marker.setMap(map); // 마커를 지도에 표시
}

2) 현재 위치 얻기 (Geolocation API)
- Geolocation API를 통해 사용자의 현재 위치를 얻고, 해당 위치를 지도에 표시

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        map = getKakaoMap(lat, lng); // 현재 위치로 지도 생성
        var content = '<div style="padding:10px;text-align:center;width:200px;font-weight:bold">현재 나의 위치!</div>';
        setMarker(lat, lng, content); // 현재 위치에 마커 표시
    });
}

3) 주소 검색 및 위치 표시
- 주소-좌표 변환을 사용하여 사용자가 입력한 주소에 해당하는 위치를 찾기
- 그 위치를 지도에 표시

function searchByAddress() {
    var geocoder = new kakao.maps.services.Geocoder();
    geocoder.addressSearch(address.value, function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
            setMarker(result[0].y, result[0].x, `<div style="padding:10px;text-align:center;width:200px;font-weight:bold">${address.value}</div>`);
            map.setCenter(coords); // 지도의 중심을 해당 위치로 이동
        } else {
            alert(`${address.value}와 일치하는 주소가 없어요`);
            address.value = '';
            address.focus();
        }
    });
}

4) 줌 조정 (줌 인/줌 아웃)
- zoomIn: 지도를 1레벨 확대
- zoomOut: 지도를 1레벨 축소

var zoomIn = () => {
    var level = map.getLevel();
    if (level === 1) return;
    map.setLevel(level - 1);
    range.value = level - 1;
    maplevel.textContent = level - 1 + " ";
};

var zoomOut = () => {
    var level = map.getLevel();
    if (level === parseInt(range.max)) return;
    map.setLevel(level + 1);
    range.value = level + 1;
    maplevel.textContent = level + 1 + " ";
};

5) 지도 레벨 동기화
- 사용자가 range input을 사용하여 지도 레벨을 변경
- 그 값에 맞춰 지도의 줌 레벨을 실시간으로 조정

range.addEventListener('input', (e) => {
    map.setLevel(parseInt(e.target.value)); // 지도 레벨을 업데이트
    maplevel.textContent = map.getLevel() + " "; // 지도 레벨 표시
});