HTML5のlocalStorageでiPhone用Webアプリを高速化：iPhoneで動かす業務用Webアプリ開発入門（4）（2/2 ページ）

function loadList() {
    var ul = document.getElementById('list');
 
    // 【1】 リストの内容を保持するJSON文字列から<li>を作成する関数オブジェクト
    var rebuild = function(json) {
        ul.innerHTML = '';
        var list = JSON.parse(json);
        for (i = 0; i < list.length; i++) {
            li = document.createElement('li');
            li.innerHTML = '<a href="#content" onclick="openContent('+ list[i].id + ')">' + escapeHTML(list[i].title) + '</a>';
            ul.appendChild(li);
        }
    }
 
    // 【2】 localStorageからJSONの取得を試みる
    var json = localStorage['list-ajax'];
 
    if (json != null) {
        // 【3】 localStorageにデータがあればそれを表示
        rebuild(json);
    } else {
        // 【4】 まだデータがないときは「読み込み中...」を表示
        ul.innerHTML = '';
        var li = document.createElement('li');
        li.innerHTML = navigator.onLine ? '読み込み中...' : 'データを取得できません';
        ul.appendChild(li);			
    }
 
    // 【5】 最新のデータを非同期で取得
    if (navigator.onLine) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'list-ajax.txt?rnd=' + new Date().getTime(), true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                var json = xhr.responseText;
  
                // 【6】 次回の呼び出しに備えてlocalStorageにJSONを保存
                localStorage['list-ajax'] = json;
  
                // 【7】 最新のデータで再表示
                rebuild(json);
            }
        };
        xhr.send();
    }
}

function prefetchContent(id, cb) {
    // 【1】 サーバからJSONデータを取得
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'content-ajax.txt?id=' + id + '&rnd=' + new Date().getTime(), true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var json = xhr.responseText;
  
            // 【2】 localStorageにJSONを保存
            localStorage['content_' + id] = json;
  
            // 【3】 保存後のコールバック関数が指定されたときは、それを呼び出す
            if (typeof(cb) == 'function') {
                cb(json);
            }
        }
    };
    xhr.send();
}
  
function openContent(id) {
    // 【4】 JSONをパースして詳細画面を組み立てる関数
    var refillContent = function(json) {
        var div = document.getElementById('content');
        var content = JSON.parse(json);
        div.innerHTML = escapeHTML(content.content);
    }
  
    // 【5】 localStorageよりデータを取得
    var json = localStorage['content_' + id];
    if (json != null) {
        // 【6】 localStorageにデータがあればその内容で表示
        refillContent(json);
    } else {
        // 【7】 localStorageにデータがなければサーバから取得して表示
        prefetchContent(id, refillContent);
    }
}

function loadList() {
    var ul = document.getElementById('list');
  
    var rebuild = function(json) {
        ul.innerHTML = '';
        var list = JSON.parse(json);
        for (i = 0; i < list.length; i++) {
            li = document.createElement('li');
            li.innerHTML = '<a href="#content" onclick="openContent('+ list[i].id + ')">' + escapeHTML(list[i].title) + '</a>';
            ul.appendChild(li);
  
            // ※以下の3行を追加
            if (localStorage['content_' + list[i].id] == null) {
                prefetchContent(list[i].id);
            }
        }
    }
 
……【以下省略】