# 웹 스토리지(Web Storage) API

localStorage와 sessionStorage는 웹 스토리지(Web Storage) API의 두 가지 주요 객체로, 브라우저에 데이터를 저장하는 데 사용됩니다.
둘 다 키-값(key-value) 쌍으로 데이터를 저장하며, 데이터를 브라우저에 클라이언트 측에 영구적으로 저장하거나 일시적으로 저장할 수 있도록 합니다.

## localStorage와 sessionStorage의 공통점

* 키-값 기반 저장
    - 데이터를 문자열 형태로 저장.
    - 저장 시 데이터를 자동으로 문자열로 변환.
    - 숫자, 객체 등도 저장할 수 있지만 문자열로 변환하여 저장해야 합니다.
* 동기적(Synchronous) 동작
    - 저장 및 읽기 작업은 동기적으로 처리됩니다.
* 브라우저 한정
    - 데이터는 브라우저에 저장되며, 브라우저 간 공유되지 않습니다.
* 인터페이스
    - setItem(key, value): 데이터를 저장.
    - getItem(key): 데이터를 읽음.
    - removeItem(key): 특정 데이터를 삭제.
    - clear(): 저장된 모든 데이터를 삭제.
    - key(index): 인덱스로 키를 가져옴.
    - length: 저장된 항목 수 반환.

## 차이점
* 데이터 지속성	
    - localStorage: 데이터를 영구적으로 저장하며, 브라우저를 닫아도 유지됨.	
    - sessionStorage: 데이터를 일시적으로 저장하며, 브라우저 탭이나 창을 닫으면 사라짐.
* 탭/창 간 공유	
    - localStorage: 동일한 출처(origin)에서는 브라우저의 모든 탭에서 데이터 공유.	
    - sessionStorage: 동일한 출처(origin)이라도 각 탭/창에서 데이터가 독립적.
* 사용 사례	
    - localStorage: 사용자 설정, 즐겨찾기, 쇼핑 카트 등의 영구 데이터 저장.	
    - sessionStorage: 임시 데이터, 폼 입력값, 특정 세션 데이터 관리.

```javascript
// 데이터 저장
localStorage.setItem("username", "philosopher");
localStorage.setItem("age", 30);

sessionStorage.setItem("sessionId", "abc123");
```

```javascript
// 데이터 읽기
const username = localStorage.getItem("username");
console.log(username); // "philosopher"

const sessionId = sessionStorage.getItem("sessionId");
console.log(sessionId); // "abc123"
```

```javascript
// 데이터 삭제
localStorage.removeItem("username");

sessionStorage.removeItem("sessionId");
```

```javascript
// 모든 데이터 삭제
localStorage.clear();

sessionStorage.clear();
```

```javascript
// 저장된 키와 값 확인
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}
```