[javascript][Google App Engine]HTML5のsessionStorageで高速化

はじめて書いたjavascriptを先輩に見せたところ、取得ボタンを連打されてGoogle App Engineに対するリクエストが大変なことになりましたw

ということで、今回はその連打対策を講じてみました。

■変更点
・「取得」ボタンをクリックしたときにGetData()を呼び出すように
・sessionStorageにデータが存在するかチェックしてあれば表示
・なければAjaxでリクエストして結果をsessionStorageに保存したうえで表示

WebStorageのうちセッション単位でデータを保持するsessionStorageと永続的に保持するlocalStorageがあるが、毎日取得するデータが変わるのでsessionStorageを採用した。

同一セッションの同一パラメータ（証券コードと営業日数）の組み合わせの場合にはsessionStorageから取得している。

AjaxHistoricalPrices
http://test-004.appspot.com/html/index.html

「処理時間」には、「取得」ボタンが押されてから表示までの時間をミリ秒単位で表示している。

実際に同一パラメータで「取得」ボタンを2回以上クリックしてもらうと、かなり高速化できていることがわかると思う。

また、画面の「データ取得元」にsessionStorageから取っているか、HTTPで取っているかを表示している。

var startTime = new Date();
var endTime = new Date();
var GetData = function(){
    startTime = new Date();
    var key = document.form.ticker.value + ':' + document.form.days.value;
    var out = sessionStorage.getItem( key );
    if (!out){
        out = Request(key);
        document.getElementById("source").innerHTML = 'HTTP.';
    }else{
        document.getElementById("source").innerHTML = 'sessionStorage.';
        echo(out);
    }
}
var Request = function( key ) {
    var url = 'http://test-004.appspot.com/dlhistorical?ticker='+document.form.ticker.value+'&days='+document.form.days.value+'&type=json';
    var XHR;
    XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function(){
        if( XHR.readyState === 4 && XHR.status == 200 ) 
            var data = JSON.parse(XHR.responseText);
            var out = '';
            for (i in data.Historical){
                out += '';
                for (j in data.Historical[i]){
                    out += '';
                }
                out += '';
            }
            out += '

'+data.Historical[i][j]+'

';
            sessionStorage.setItem(key,out);
            echo(out);
        };
    XHR.open( 'GET', url, true );  
    XHR.send();
}
var echo = function( text ) {
    endTime = new Date();
    var msec = endTime - startTime;
    document.getElementById("exectime").innerHTML = msec+"ミリ秒かかりました
";
    document.getElementById("result_div").innerHTML = text;
}