05-3. Storage

1. Storage

• 목적: 애플리케이션에서 데이터를 영속적으로 저장하고 불러오는 것은 기본적이고 빈번하게 수행되는 작업입니다.
• 백엔드: 데이터베이스를 통해 데이터를 영속적으로 저장하며, 다양한 데이터베이스(예: Oracle, MySQL, 클라우드 데이터베이스)를 사용할 수 있습니다.
• 프론트엔드: 웹 애플리케이션에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하며, JavaScript에서 Web API를 통해 이를 구현합니다.

2. 스토리지 종류

• 로컬스토리지: 동일 오리진의 모든 세션에서 공유되는 스토리지입니다. 데이터는 브라우저가 종료되어도 유지됩니다.
• 세션스토리지: 세션 단위로 이용되는 스토리지로, 특정 브라우저 창에서만 사용되며, 브라우저가 종료되면 데이터가 사라집니다.

3. sessionStorage

• 정의: 하나의 브라우저 창에서 실행되는 애플리케이션에 대해 세션 단위로 저장되는 데이터입니다.
• 세션 관리: 서로 다른 브라우저 창에서 실행되는 경우 세션도 각각 따로 유지됩니다.
• 영속성: 브라우저가 종료되면 데이터는 사라집니다.

4. localStorage

• 정의: 동일 오리진의 모든 세션에서 공유할 수 있는 데이터를 저장하는 데 사용됩니다.
• 영속성: 로컬스토리지에 저장된 데이터는 브라우저가 종료되어도 사라지지 않습니다.

5. 스토리지 데이터 저장 및 획득

• Web API: localStorage와 sessionStorage 객체를 사용하여 데이터를 저장하거나 획득합니다.
• 주요 메서드:
  • setItem(key, value): 스토리지 데이터 저장
  • getItem(key): 스토리지 데이터 획득
  • removeItem(key): 스토리지 데이터 삭제
  • clear(): 모든 스토리지 데이터 삭제

6. 데이터 삭제

• 방법: removeItem() 또는 clear() 메서드를 사용하여 데이터를 삭제합니다.

7. 모든 스토리지 데이터 획득하기

• 방법: length 프로퍼티를 이용해 반복문을 작성하거나 Object.keys()를 사용해 모든 키를 배열로 획득할 수 있습니다.

8. 스토리지 이벤트

• 정의: 스토리지 데이터가 변경될 때 발생하는 이벤트입니다.
• 유의 사항: 데이터를 변경한 브라우저 창에서는 이벤트가 발생하지 않으며, 다른 브라우저 창에서 데이터 변경을 감지하는 용도로 사용됩니다.
• StorageEvent 객체: 이벤트가 발생할 때 전달되며, 다양한 정보를 포함합니다.
  • key: 변경된 데이터 키
  • newValue: 변경된 데이터 값
  • oldValue: 변경 전 데이터 값
  • storageArea: 변경된 스토리지 객체
  • url: 데이터 변경을 한 HTML 페이지의 URL