자바스크립트에서 웹 스토리지(Web Storage) API의 사용법은 무엇인가요?

Q1: 웹 스토리지(Web Storage) API란 무엇인가요?
A1: 웹 스토리지 API는 브라우저에 데이터를 로컬에 저장할 수 있게 해주는 API로, 주로 두 가지 형태를 제공합니다.
- `localStorage`: 브라우저에 영구적으로 데이터를 저장, 브라우저를 닫아도 데이터가 유지됩니다.
- `sessionStorage`: 세션 당 데이터를 저장, 브라우저 탭을 닫으면 데이터가 삭제됩니다.

Q2: 웹 스토리지의 주요 메서드와 프로퍼티는 무엇인가요?
A2: 대표적인 메서드/프로퍼티는 다음과 같습니다.
- `setItem(key, value)`: 특정 키에 값을 저장합니다.
- `getItem(key)`: 특정 키의 값을 가져옵니다. 값이 없으면 `null` 반환.
- `removeItem(key)`: 특정 키와 값을 삭제합니다.
- `clear()`: 저장된 모든 데이터를 삭제합니다.
- `length`: 저장된 키-값 쌍의 개수를 반환합니다.
- `key(index)`: 인덱스에 해당하는 키를 반환합니다.

Q3: localStorage에 데이터를 저장하고 가져오는 기본 예제는?
A3:
```javascript
// 저장
localStorage.setItem('username', 'Alice');

// 가져오기
const username = localStorage.getItem('username');
console.log(username); // 'Alice'
```

Q4: sessionStorage와 localStorage의 차이는?
A4:
- `localStorage`: 영구 저장, 브라우저 종료 후에도 유지됨
- `sessionStorage`: 세션 저장, 브라우저 탭 또는 윈도우가 닫힐 때 삭제됨

Q5: 객체(JSON)를 웹 스토리지에 저장하려면 어떻게 해야 하나요?
A5: 웹 스토리지는 문자열만 저장 가능하므로 JSON 문자열로 변환 후 저장해야 합니다.
```javascript
const user = {name: 'Alice', age: 25};
localStorage.setItem('user', JSON.stringify(user));
// 가져올 때는 다시 객체로 변환
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 'Alice'
```

Q6: 웹 스토리지 저장 용량 제한은 얼마인가요?
A6: 대략적으로 도메인 당 약 5MB 정도가 일반적이며, 브라우저마다 차이가 있습니다. 용량이 초과되면 `QuotaExceededError`가 발생할 수 있습니다.

Q7: 웹 스토리지 데이터를 삭제하는 방법은?
A7:
- 특정 키 삭제: `localStorage.removeItem('key')`
- 전체 삭제: `localStorage.clear()`

Q8: 웹 스토리지 사용 시 주의할 점은 무엇인가요?
A8:
- 저장된 데이터는 클라이언트에 노출되므로 민감한 정보 저장 금지
- 가능한 데이터 크기 제한 확인
- JSON 직렬화/역직렬화 시 오류 처리 필요
- 브라우저 호환성 확인 (대부분의 최신 브라우저에서 지원)

Q9: 웹 스토리지에 데이터가 저장되었을 때 이벤트를 감지할 수 있나요?
A9: 네, `window` 객체의 `storage` 이벤트를 사용하면 다른 창/탭에서 저장소가 변경된 것을 감지할 수 있습니다. 단, 같은 창에서는 이벤트가 발생하지 않습니다.
```javascript
window.addEventListener('storage', (event) => {
console.log('Storage changed:', event.key, event.newValue);
});
```

Q10: 쿠키(Cookie)와 웹 스토리지의 차이점은 무엇인가요?
A10:
- 웹 스토리지는 클라이언트에만 저장되며 서버로 자동 전송하지 않음
- 쿠키는 요청 시마다 서버로 전송되어 트래픽 부하 및 보안 취약점 가능성
- 웹 스토리지는 저장 용량이 더 크고 사용법이 간단함
- 쿠키는 만료 시간 설정 가능, 웹 스토리지는 직접 삭제하거나 영구/세션 단위

---
이상으로 자바스크립트 웹 스토리지 API의 기본 사용법과 관련 FAQ를 정리했습니다.

웹 스토리지(Web Storage) API는 웹 애플리케이션이 클라이언트 측에서 데이터를 저장하고 관리할 수 있도록 해주는 기능입니다.

이 API는 두 가지 주요 저장소를 제공합니다: `localStorage`와 `sessionStorage`. 이 두 저장소는 각각의 용도와 특성이 다르며, 웹 애플리케이션에서 데이터를 효율적으로 관리하는 데 유용합니다.

1. 웹 스토리지의 종류 1.1 localStorage - 영속성 : `localStorage`에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 유지됩니다.

사용자가 명시적으로 데이터를 삭제하지 않는 한, 데이터는 영구적으로 저장됩니다.

- 용도 : 사용자 설정, 테마, 로그인 정보 등과 같이 지속적으로 유지해야 하는 데이터를 저장하는 데 적합합니다.

1.2 sessionStorage - 영속성 : `sessionStorage`에 저장된 데이터는 브라우저 탭이나 창이 닫힐 때까지 유지됩니다.

즉, 같은 세션 내에서만 데이터가 유지되며, 다른 탭이나 창에서는 접근할 수 없습니다.

- 용도 : 사용자가 현재 세션에서만 필요한 데이터, 예를 들어 일시적인 폼 데이터나 상태 정보를 저장하는 데 적합합니다.



2. 웹 스토리지 API 사용법 웹 스토리지 API는 매우 간단하게 사용할 수 있습니다.

기본적으로 `localStorage`와 `sessionStorage`는 비슷한 메서드를 제공합니다.



2.1 데이터 저장하기 데이터를 저장할 때는 `setItem` 메서드를 사용합니다.

이 메서드는 두 개의 인자를 받습니다: 키(key)와 값(value). ```javascript // localStorage에 데이터 저장 localStorage.setItem('username', 'JohnDoe'); // sessionStorage에 데이터 저장 sessionStorage.setItem('sessionID', '123456'); ```

2.2 데이터 읽기 저장된 데이터를 읽을 때는 `getItem` 메서드를 사용합니다.

이 메서드는 키를 인자로 받아 해당 키에 대한 값을 반환합니다.

```javascript // localStorage에서 데이터 읽기 const username = localStorage.getItem('username'); console.log(username); // JohnDoe // sessionStorage에서 데이터 읽기 const sessionID = sessionStorage.getItem('sessionID'); console.log(sessionID); // 123456 ```

2.3 데이터 삭제 특정 데이터를 삭제할 때는 `removeItem` 메서드를 사용합니다.

이 메서드는 삭제할 데이터의 키를 인자로 받습니다.

```javascript // localStorage에서 데이터 삭제 localStorage.removeItem('username'); // sessionStorage에서 데이터 삭제 sessionStorage.removeItem('sessionID'); ```

2.4 모든 데이터 삭제 모든 데이터를 삭제하고 싶을 때는 `clear` 메서드를 사용합니다.

이 메서드는 저장소의 모든 데이터를 삭제합니다.

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

3. 데이터의 크기 제한 웹 스토리지의 데이터 크기는 브라우저마다 다르지만, 일반적으로 각 도메인에 대해 약 5MB의 저장 용량이 제공됩니다.

이는 쿠키보다 훨씬 큰 용량이며, 대량의 데이터를 저장하는 데 유리합니다.



4. 데이터 타입 웹 스토리지에 저장되는 데이터는 문자열(string) 형태로 저장됩니다.

따라서 객체나 배열과 같은 복잡한 데이터 구조를 저장하려면 JSON.stringify()를 사용하여 문자열로 변환한 후 저장하고, JSON.parse()를 사용하여 다시 객체로 변환해야 합니다.

```javascript // 객체를 localStorage에 저장 const user = { name: 'John', age: 30 }; localStorage.setItem('user', JSON.stringify(user)); // localStorage에서 객체를 읽기 const storedUser = JSON.parse(localStorage.getItem('user')); console.log(storedUser.name); // John ```

5. 보안 및 제한 사항 - 동일 출처 정책 : 웹 스토리지는 동일 출처 정책에 따라 작동합니다.

즉, 같은 도메인에서만 접근할 수 있습니다.

- 민감한 데이터 저장 주의 : 웹 스토리지에 민감한 정보를 저장하는 것은 보안상 위험할 수 있습니다.

예를 들어, 비밀번호나 신용카드 정보는 저장하지 않는 것이 좋습니다.

결론 웹 스토리지 API는 클라이언트 측에서 데이터를 쉽게 저장하고 관리할 수 있는 강력한 도구입니다.

`localStorage`와 `sessionStorage`를 적절히 활용하면 사용자 경험을 개선하고 애플리케이션의 성능을 향상시킬 수 있습니다.

그러나 데이터의 보안과 저장 용량에 대한 주의가 필요합니다.