步驟 5：保存到本地存儲(chǔ)

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

編輯 piratebadge.dart

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

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

關(guān)鍵信息

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

給 PirateName 類添加一個(gè)命名的構(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)建一個(gè)新的 PirateName 實(shí)例來自 JSON 編碼的字符串。
PirateName.fromJSON 是一個(gè)命名的構(gòu)造函數(shù)。
JSON.decode() 解析 JSON 字符串并由此創(chuàng)建一個(gè) Dart 對(duì)象。
pirate name 解析成一個(gè) Map 對(duì)象。

添加 getter 給 PirateName 類，編碼 pirate name 在 JSON 字符串中。

class PirateName {
  ...
  String get jsonString => JSON.encode({"f": _firstName, "a": _appellation});
}

getter 使用 map 格式化 JSON 字符串。

聲明一個(gè)頂級(jí)字符串。

final String TREASURE_KEY = 'pirateName';

void main() {
  ...
}

你保存鍵值對(duì)到本地存儲(chǔ)，這個(gè)字符串是鍵，pirate name 是值。

當(dāng)標(biāo)記的名字更改時(shí)保存標(biāo)記的 pirate name 。

void setBadgeName(PirateName newName) {
  if (newName == null) {
    return;
  }
  querySelector('#badgeName').text = newName.pirateName;
  window.localStorage[TREASURE_KEY] = newName.jsonString;
}

本地存儲(chǔ)通過瀏覽器窗口提供。

添加一個(gè)頂級(jí)函數(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;
  }
}

這個(gè)方法從本地存儲(chǔ)檢索 pirate name并且由此創(chuàng)建一個(gè) PirateName 對(duì)象。

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

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

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

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

通過 File > Save All 保存文件。

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

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

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

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：添加一個(gè)按鈕下一篇：步驟 7：構(gòu)建并運(yùn)行 App