Dart Blog: 6月 2015

前回の記事で DartPad を紹介しましたが、筆者が2回めに DartPad を開いた際、1回めに入力したコードが残っていて驚きました。

まあ、単に Local Storage に保存されているだけなんですが、普段 Web ブラウザベースの開発環境を使わないので、新鮮に感じたのでした。

新鮮に感じたついでに、Dart で Local Storage を利用する方法を書いてみました。

まずは dart。

import 'dart:html';
void main() {
  InputElement serif = querySelector('#serif');
  InputElement submit = querySelector('#save');
  Element output = querySelector('#outputSerif');
  Storage localStorage = window.localStorage;

  String savedSerif = localStorage['serif'];
  if (savedSerif != null) output.text = savedSerif;

  submit.onClick.listen((Event e) {
    output.text = serif.value;
    localStorage['serif'] = serif.value;
  });
}

そして html。

<html>
  <head>
    <meta charset="utf-8">
    <title>Dart で Local Storage</title>
  </head>
  <body>
    <h1>Dart で Local Storage</h1>
   <label for="serif">好きなセリフは？</label>
   <input type="text" name="serif" id="serif">
   <input type="submit" id="save" value="Save">
    <h2>
      <output id="outputSerif"></output>
    </h2>
  </body>
</html>

結果はこんな感じ。

実際のところ DartPad は、iframe タグに sandbox 属性「allow-same-origin」の指定がないので動きません。。。
DartPad で動かしたければ、無理やりやってね（笑）

久々に技術的なことを書きました。
DartPad が思いのほか手軽なので、今後は技術的な内容も増やしていこうと思います。

2015年6月2日火曜日

Dart で Local Storage