在這一步中，你給應用一些持久性通過把標記的名字保存到本地存儲當它每次改變時。當你重啟應用時它初始化標記，從保存的名字里。
## 編輯 piratebadge.dart
從 `dart:convert` 庫里導入 JSON 轉化器。
import 'dart:html';
import 'dart:math' show Random;
import 'dart:convert' show JSON;
## 關鍵信息
- `JSON` 提供了方便的訪問最常見的 JSON 的用例。
給 PirateName 類添加一個命名的構造函數。
class PirateName {
...
PirateName.fromJSON(String jsonString) {
Map storedName = JSON.decode(jsonString);
_firstName = storedName['f'];
_appellation = storedName['a'];
}
}
- 構造函數創建一個新的 PirateName 實例來自 JSON 編碼的字符串。
- `PirateName.fromJSON` 是一個命名的構造函數。
- `JSON.decode()` 解析 JSON 字符串并由此創建一個 Dart 對象。
- `pirate name` 解析成一個 `Map` 對象。
添加 getter 給 PirateName 類，編碼 pirate name 在 JSON 字符串中。
class PirateName {
...
String get jsonString => JSON.encode({"f": _firstName, "a": _appellation});
}
- getter 使用 map 格式化 JSON 字符串。
聲明一個頂級字符串。
final String TREASURE_KEY = 'pirateName';
?
void main() {
...
}
- 你保存鍵值對到本地存儲，這個字符串是鍵，`pirate name` 是值。
當標記的名字更改時保存標記的 `pirate name` 。
void setBadgeName(PirateName newName) {
if (newName == null) {
return;
}
querySelector('#badgeName').text = newName.pirateName;
window.localStorage[TREASURE_KEY] = newName.jsonString;
}
- 本地存儲通過瀏覽器窗口提供。
添加一個頂級函數 `getBadgeNameFromStorage()` 。
void setBadgeName(PirateName newName) {
...
}
?
PirateName getBadgeNameFromStorage() {
String storedName = window.localStorage[TREASURE_KEY];
if (storedName != null) {
return new PirateName.fromJSON(storedName);
} else {
return null;
}
}
- 這個方法從本地存儲檢索 `pirate name`并且由此創建一個 PirateName 對象。
通過 `main()` 函數調用方法。
void main() {
...
setBadgeName(getBadgeNameFromStorage());
}
- 從本地存儲中初始化標記的名字。
## 運行應用
通過 `File > Save All` 保存文件。
運行應用通過正確點擊 `piratebadge.html`，選擇 `Run in Dartium`。
把你的應用和下面正在運行的進行比較。
點擊放一個名字進標記。重新運行這個應用會看到你寫的名字。
**圖片 6.1** dart4
