步驟 5：保存到本地存儲

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

編輯 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 是值。

當(dāng)標(biāo)記的名字更改時保存標(biāo)記的 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());
}

從本地存儲中初始化標(biāo)記的名字。

運(yùn)行應(yīng)用

通過 File > Save All 保存文件。

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

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

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

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-5-run-the-skeleton-app-pic1.png" alt="dart4" />

上一篇：步驟 3：添加一個按鈕下一篇：步驟 7：構(gòu)建并運(yùn)行 App