プログラム学習室 http://studyhallweb.com/

Dart言語: Local Storage

デモンストレーション (Demonstration)

Keys of local storage:

[Add New / Over Write]


[View / Delete]
key:
value:

サンプルコード (Sample Code)

HTML

<p>
  Keys of local storage: <output id="data-output"></output>
</p>
[Add New / Over Write]<br/>
<input type="text" id="newKey">
<input type="text" id="newData">
<input type="submit" id="new" value="Save"><br/>
<br/>
[View / Delete]<br/>
key:
<select name="keys" id="keys">
  <!-- localStorage から keyをセットする -->
</select>
<input type="submit" id="del" value="Delete"><br/>
value:<output id="keyValue" ></output><br/>
					

Dart

import 'dart:html';

/**
 * Local Storage 処理クラス本体
 */
class storage {
  InputElement inputData = querySelector('#inputData');
  InputElement addNew = querySelector('#new');
  InputElement delKey = querySelector('#del');
  Element output = querySelector('#data-output');
  Storage localStorage = window.localStorage;

  SelectElement selectKey = querySelector('#keys');    // プルダウンリスト key一覧
  Element keyValue = querySelector("#keyValue");       // プルダウンリストに表示されているkeyの値

  storage() {
    // プルダウンリストに現在のキー一覧をセットする
    _setKeys();

    // [View]プルダウンリストで選択されているキーの値表示
    selectKey.onChange.listen((e) => _viewKeyValue());

    // [Save]ボタンクリックで新しいキーとデータを追加
    addNew.onClick.listen((e) => _addNewData());

    // [del]ボタンクリックで選択中のキーを削除
    delKey.onClick.listen((e) => _delKey());
  }
  /**
   * プルダウンリストで選択されているキーの値表示
   */
  _viewKeyValue() {
    print(selectKey.value);
    String key = localStorage[selectKey.value];
    keyValue.text = key;
  }
  /**
   * プルダウンリストに Local Storage のキー一覧をセットする
   */
  _setKeys() {
    selectKey.children.clear();
    List<String> keys = localStorage.keys;
    String html = null;
    for(int i = 0; i < keys.length; i++) {
      html = "<option value=\"" + keys[i] + "\">" + keys[i] + "</option>";
      selectKey.appendHtml(html);
    }
    output.text = keys.toString();
  }
  /**
   * Saveボタンで新しいKeyとDataを追加
   */
  _addNewData() {
    InputElement newKey = querySelector('#newKey');
    InputElement newData = querySelector('#newData');
    Map <String, String> newRecord = new Map();
    newRecord[newKey.value] = newData.value;
    localStorage.addAll(newRecord);    // 既存のKeyの場合はOverWriteされる
    // localStorageの値を再取得
    _setKeys();
  }
  /**
   * DeleteボタンでKeyとDataを削除
   */
  _delKey() {
    localStorage.remove(selectKey.value);
    // localStorageの値を再取得
    _setKeys();
  }
}

main() {
	storage LocalFile = new storage();
}
					

説明

Local Storage を定義するには、Storage localStorage = window.localStorage; のように windowオブジェクトを使います。

データの保存には、setItem() は使えません。
Loval Storage は Map型ですので、データの追加は addAll(Map) で出来ます。
追加するデータのキーが既存のキーと重複する場合は、データが上書きされます。
    Map <String, String> newRecord = new Map();
    newRecord[newKey.value] = newData.value;
    localStorage.addAll(newRecord);
					

データの取得にも getItem() が使えません。
localStorage[selectKey.value] のように直接キーを指定します。

キーの削除も、Map型ですので remove(String key) で行います。
やはり removeItem() は使えません