在這一步中，你給應(yīng)用一些持久性通過把標記的名字保存到本地存儲當它每次改變時。當你重啟應(yīng)用時它初始化標記，從保存的名字里。

編輯 piratebadge.dart

從 dart:convert 庫里導(dǎo)入 JSON 轉(zhuǎn)化器。

import 'dart:html';
import 'dart:math' show Random;
import 'dart:convert' show JSON;

關(guān)鍵信息

• JSON 提供了方便的訪問最常見的 JSON 的用例。

給 PirateName 類添加一個命名的構(gòu)造函數(shù)。

class PirateName {
  ...
  PirateName.fromJSON(String jsonString) {
    Map storedName = JSON.decode(jsonString);
    _firstName = storedName['f'];
    _appellation = storedName['a'];
  }
}

• 構(gòu)造函數(shù)創(chuàng)建一個新的 PirateName 實例來自 JSON 編碼的字符串。
• PirateName.fromJSON 是一個命名的構(gòu)造函數(shù)。
• JSON.decode() 解析 JSON 字符串并由此創(chuàng)建一個 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;
}

• 本地存儲通過瀏覽器窗口提供。

添加一個頂級函數(shù) 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并且由此創(chuàng)建一個 PirateName 對象。

通過 main() 函數(shù)調(diào)用方法。

void main() {
  ...
  setBadgeName(getBadgeNameFromStorage());
}

• 從本地存儲中初始化標記的名字。

運行應(yīng)用

通過 File > Save All 保存文件。

運行應(yīng)用通過正確點擊 piratebadge.html，選擇 Run in Dartium。

把你的應(yīng)用和下面正在運行的進行比較。

點擊放一個名字進標記。重新運行這個應(yīng)用會看到你寫的名字。