다트에서 로컬 저장소(Local Storage) 사용 방법은?

Q1: 다트에서 로컬 저장소(Local Storage)란 무엇인가요?
A1: 로컬 저장소는 웹 브라우저에 데이터를 키-값 쌍으로 저장할 수 있는 공간으로, 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 데이터가 유지됩니다. 다트에서는 주로 웹 개발 시 `window.localStorage` API를 통해 접근합니다.

Q2: 다트에서 로컬 저장소에 데이터를 어떻게 저장하나요?
A2: 다음과 같이 `window.localStorage` 객체의 `setItem` 메서드를 사용합니다.
```dart
import 'dart:html';

void saveData() {
window.localStorage['key'] = 'value';
// 또는
window.localStorage.setItem('key', 'value');
}
```

Q3: 다트에서 로컬 저장소에서 데이터를 어떻게 읽나요?
A3: `window.localStorage`의 `getItem` 또는 키 접근을 통해 값을 가져올 수 있습니다.
```dart
import 'dart:html';

void loadData() {
String? value = window.localStorage['key'];
// 또는
String? value2 = window.localStorage.getItem('key');
print(value);
}
```

Q4: 다트에서 로컬 저장소의 데이터를 어떻게 삭제할 수 있나요?
A4: 특정 키를 삭제하려면 `removeItem` 메서드를 사용합니다.
```dart
window.localStorage.removeItem('key');
```

Q5: 모든 로컬 저장소 데이터를 한번에 삭제하려면?
A5: `clear()` 메서드를 사용합니다.
```dart
window.localStorage.clear();
```

Q6: 저장 가능한 데이터 타입은 무엇인가요?
A6: 로컬 저장소는 문자열(string)만 저장할 수 있습니다. 숫자나 객체 데이터를 저장하려면 JSON 문자열로 변환해야 합니다. 예: ```dart
import 'dart:convert';

var data = {'name': 'John', 'age': 30};
window.localStorage['user'] = jsonEncode(data);

var jsonString = window.localStorage['user'];
if (jsonString != null) {
var userData = jsonDecode(jsonString);
print(userData['name']);
}
```

Q7: 모바일 앱이나 일반 다트(서버, 콘솔) 환경에서 로컬 저장소를 사용하려면 어떻게 해야 하나요?
A7: `window.localStorage`는 웹 환경 전용으로, 모바일 앱(Flutter)이나 콘솔 앱에서는 사용할 수 없습니다. 모바일 앱에서는 `shared_preferences` 패키지를, 서버나 콘솔에서는 파일, 데이터베이스, 또는 캐시 라이브러리를 사용하는 것이 일반적입니다.

Q8: 로컬 저장소 사용 시 주의할 점은?
A8:
- 저장 용량 제한(보통 5MB 내외)과 보안 문제에 주의하세요.
- 민감한 정보는 암호화하거나 저장하지 않는 것이 좋습니다.
- 비동기 작업이 아니므로 동시성 이슈에 대비해야 합니다.

Q9: 예제 전체 코드(웹용)
```dart
import 'dart:html';
import 'dart:convert';

void main() {
// 저장
var user = {'name': 'Alice', 'age': 25};
window.localStorage['user'] = jsonEncode(user);

// 읽기
String? jsonString = window.localStorage['user'];
if (jsonString != null) {
var userData = jsonDecode(jsonString);
print('User Name: ${userData['name']}');
}

// 삭제
window.localStorage.removeItem('user');
}
```

다트(Dart)에서 로컬 저장소(Local Storage)를 사용하는 방법은 주로 웹 애플리케이션 개발 시 활용됩니다.

로컬 저장소는 사용자의 브라우저에 데이터를 저장할 수 있는 방법으로, 세션 스토리지와 로컬 스토리지 두 가지 형태가 있습니다.

이 두 가지는 모두 웹 스토리지 API를 통해 접근할 수 있으며, 데이터는 키-값 쌍으로 저장됩니다.

1. 로컬 스토리지와 세션 스토리지의 차이 - 로컬 스토리지(Local Storage) : 데이터가 브라우저에 영구적으로 저장됩니다.

사용자가 브라우저를 닫거나 컴퓨터를 재부팅해도 데이터가 유지됩니다.

- 세션 스토리지(Session Storage) : 데이터가 현재 세션 동안만 유지됩니다.

즉, 사용자가 브라우저 탭을 닫으면 데이터가 삭제됩니다.



2. 다트에서 로컬 저장소 사용하기 다트에서 로컬 저장소를 사용하기 위해서는 `dart:html` 라이브러리를 사용해야 합니다.

이 라이브러리는 웹 애플리케이션에서 HTML 문서와 상호작용할 수 있는 기능을 제공합니다.



2.1. 로컬 스토리지 사용 예제 ```dart import 'dart:html'; void main() { // 로컬 스토리지에 데이터 저장 window.localStorage['username'] = 'JohnDoe'; // 로컬 스토리지에서 데이터 읽기 String? username = window.localStorage['username']; print('Stored username: $username'); // 로컬 스토리지에서 데이터 삭제 window.localStorage.remove('username'); // 모든 로컬 스토리지 데이터 삭제 window.localStorage.clear(); } ```

2.2. 세션 스토리지 사용 예제 ```dart import 'dart:html'; void main() { // 세션 스토리지에 데이터 저장 window.sessionStorage['sessionId'] = 'abc123'; // 세션 스토리지에서 데이터 읽기 String? sessionId = window.sessionStorage['sessionId']; print('Stored session ID: $sessionId'); // 세션 스토리지에서 데이터 삭제 window.sessionStorage.remove('sessionId'); // 모든 세션 스토리지 데이터 삭제 window.sessionStorage.clear(); } ```

3. 데이터 타입 로컬 스토리지와 세션 스토리지는 문자열만 저장할 수 있습니다.

따라서 객체나 배열과 같은 복잡한 데이터 구조를 저장하려면 JSON 형식으로 변환해야 합니다.



3.1. 객체 저장 예제 ```dart import 'dart:html'; import 'dart:convert'; void main() { // 객체를 JSON 문자열로 변환하여 저장 Map user = {'name': 'John', 'age': 30}; window.localStorage['user'] = jsonEncode(user); // JSON 문자열을 객체로 변환하여 읽기 String? userJson = window.localStorage['user']; if (userJson != null) { Map userData = jsonDecode(userJson); print('User name: ${userData['name']}, Age: ${userData['age']}'); } } ```

4. 주의사항 - 용량 제한 : 로컬 스토리지와 세션 스토리지의 용량은 브라우저마다 다르지만 일반적으로 5MB 정도입니다.

대량의 데이터를 저장할 경우 IndexedDB와 같은 다른 저장소를 고려해야 합니다.

- 보안 : 로컬 스토리지에 저장된 데이터는 클라이언트 측에서 쉽게 접근할 수 있으므로, 민감한 정보(예: 비밀번호, 개인 정보)는 저장하지 않는 것이 좋습니다.

- 동기화 : 로컬 스토리지는 동기화되지 않으므로, 여러 탭에서 같은 데이터를 수정할 경우 데이터 불일치가 발생할 수 있습니다.

결론 다트에서 로컬 저장소를 사용하는 것은 웹 애플리케이션에서 사용자 데이터를 간편하게 저장하고 관리할 수 있는 유용한 방법입니다.

로컬 스토리지와 세션 스토리지의 특성을 이해하고 적절히 활용하면, 사용자 경험을 향상시키는 데 큰 도움이 됩니다.