로컬 저장소, 세션 저장소 이용 예제

동적으로 로컬 저장소와 세션 저장소를 변경하여 저장/삭제하는 예제입니다.

 

[ storage_ex.html ]

<!DOCTYPE html>
<html>
<head>
  <title>스토리지 서비스 예제</title>
</head>
<body>
  <h1>사용자 정보 입력</h1>
  <label for="name">이름:</label>
  <input type="text" id="name"><br><br>
  <label for="age">나이:</label>
  <input type="number" id="age"><br><br>
  <button id="saveButton">저장</button>

  <h1>저장된 사용자 정보</h1>
  <div id="userInfo"></div>

  <h1>스토리지 설정</h1>
  <select id="storageType">
    <option value="local">로컬 스토리지</option>
    <option value="session">세션 스토리지</option>
  </select>
  <button id="changeStorageButton">스토리지 변경</button>
  <button id="clearButton">스토리지 초기화</button>

  <script>
    // 저장소 인터페이스
    class StorageInterface {
      getItem(key) {
        throw new Error('getItem 메소드를 구현해야 합니다.');
      }

      setItem(key, value) {
        throw new Error('setItem 메소드를 구현해야 합니다.');
      }

      removeItem(key) {
        throw new Error('removeItem 메소드를 구현해야 합니다.');
      }

      clear() {
        throw new Error('clear 메소드를 구현해야 합니다.');
      }
    }

    // 로컬 스토리지 구현체
    class LocalStorageService extends StorageInterface {
      getItem(key) {
        return JSON.parse(localStorage.getItem(key));
      }

      setItem(key, value) {
        localStorage.setItem(key, JSON.stringify(value));
      }

      removeItem(key) {
        localStorage.removeItem(key);
      }

      clear() {
        localStorage.clear();
      }
    }

    // 세션 스토리지 구현체
    class SessionStorageService extends StorageInterface {
      getItem(key) {
        return JSON.parse(sessionStorage.getItem(key));
      }

      setItem(key, value) {
        sessionStorage.setItem(key, JSON.stringify(value));
      }

      removeItem(key) {
        sessionStorage.removeItem(key);
      }

      clear() {
        sessionStorage.clear();
      }
    }

    // 저장소 서비스 (팩토리 패턴)
    class StorageService {
      constructor(storageType = 'local') {
        this.setStorageType(storageType);
      }

      setStorageType(storageType) {
        try {
          this.storage = this.createStorage(storageType);
        } catch (error) {
          console.error(error.message);
          this.storage = new LocalStorageService(); // 기본값 설정
        }
      }

      createStorage(storageType) {
        switch (storageType) {
          case 'local':
            return new LocalStorageService();
          case 'session':
            return new SessionStorageService();
          default:
            throw new Error(`지원하지 않는 스토리지 유형: ${storageType}`);
        }
      }

      getItem(key) {
        return this.storage.getItem(key);
      }

      setItem(key, value) {
        this.storage.setItem(key, value);
      }

      removeItem(key) {
        this.storage.removeItem(key);
      }

      clear() {
        this.storage.clear();
      }
    }

    const storage = new StorageService(localStorage.getItem('currentStorage') || 'local');
    document.getElementById('storageType').value = localStorage.getItem('currentStorage') || 'local';

    function displayUserInfo() {
      const user = storage.getItem('user');
      const userInfoDiv = document.getElementById('userInfo');
      if (user) {
        userInfoDiv.innerHTML = `이름: ${user.name}, 나이: ${user.age}`;
      } else {
        userInfoDiv.innerHTML = '저장된 사용자 정보가 없습니다.';
      }
    }

    displayUserInfo();

    document.getElementById('saveButton').addEventListener('click', () => {
      const name = document.getElementById('name').value;
      const age = document.getElementById('age').value;
      storage.setItem('user', { name, age: parseInt(age) });
      displayUserInfo();
    });

    document.getElementById('changeStorageButton').addEventListener('click', () => {
        const storageType = document.getElementById('storageType').value;
        storage.setStorageType(storageType);
        localStorage.setItem('currentStorage', storageType); // 현재 스토리지 유형 저장
        displayUserInfo();
    });

    document.getElementById('clearButton').addEventListener('click', () => {
      storage.clear();
      displayUserInfo();
    });
  </script>
</body>
</html>

 

반응형
저작자표시 비영리

'JavaScript, jQuery' 카테고리의 다른 글

모던 웹을 위한 한국 지도 시각화 geo-korea  (0) 2025.03.30
웹페이지 수학식 표기 예제  (0) 2025.03.13
Cookies, Local Storage, Session Storage  (0) 2025.01.31
개발자 면접 단골질문 자바스크립트 this  (0) 2022.12.30
자바스크립트, ASCII 이미지, ASCII 카메라 동영상 출력  (0) 2022.11.30

+ Recent posts

티스토리툴바