列車時刻表(15) – ローカルストレージの管理

現在の実装では、ロードした路線データ(時刻表データ)をローカルストレージに保存している。ユーザ側で管理できるよう、使用中のローカルストレージの一覧を表示し、削除できるようにする。

• 設定画面(#pgTTSetting)に一覧表を表示する

  <!-- HTML -->
  <ul data-role="listview" id="lvTTSettingLS" data-inset="true"></ul>
  

  ローカルストレージのキー(路線データのファイル名)をリストビューの各行に付加する。

  // JavaScript
  function showLocalStorage(){
    var lvItem = '';
    var lnname = ''; // 路線名
    $('#lvTTSettingLS').empty();
    
    for (var i=0; i<localStorage.length; i++){
      lnname = getObjectByKV(gLines, 'ln_file', localStorage.key(i)).ln_name
      lvItem += '<li data-icon="trash" data-lskey="' + localStorage.key(i) + '">'
        + '<a href="#">'
        + lnname + '<span class="ui-li-aside">' + localStorage.key(i) + '</span>'
        + '</a></li>';
    }
    
    $('#lvTTSettingLS').append(lvItem); $('#lvTTSettingLS').listview('refresh');
  }
  

  実行例：
  

• クリック時のイベントハンドラを定義する
  クリックされたら(確認ダイアログの表示はせずに)、該当する路線データをローカルストレージから削除する。

  // JavaScript
  $(this).on('click', '#lvTTSettingLS li', function(){
    // クリックされた行のキーを取得し、ローカルストレージを削除
    localStorage.removeItem($(this).data('lskey'));
    // ローカルストレージ一覧を表示
    showLocalStorage();
  });