Android、Java、Web系、Linux、マラソン等の備忘録

2011/04/16

JavaScriptオブジェクト⇔[JSON]⇔ローカルストレージの流れ

0 件のコメント

Opera Extensionsでも作ってみたいないと・・サンプルを見ていたら、データの保持にlocalStorageというやり方がありました。

localStrageはHTML5からの仕様で、Cookie の代わりとなるものでだが、より大容量データをブラウザに保存できるものだそうです。こちらの概要がわかりやすいと思います。

・Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
http://d.hatena.ne.jp/amachang/20080924/1222239494

で、直接値を入れて保存することもできますが、ここでは、JSON形式にしてデータを出し入れしてみたいと思います。

JavaScript ⇔ [JSON] ⇔ localStrage

その前に、JSONでどのようなデータを扱うかですが、下記のように、サイトのタイトルとURLを複数個格納するデータです。

{"modified":"2011/04/15 Fri",
"items":
   [
   {"title":"タイトル1","url":"http://www.yahoo.co.jp/"},
   {"title":"タイトル2","url":"http://www.google.co.jp/"}
   {"title":"タイトル3","url":"http://twitter.com/"}
   ]
}

流れはJavaScriptオブジェクトにデータを格納し、それをJSONデータにします。それをローカルストレージへ保存します。もう一方では、ローカルストレージからJSONデータを取得し、そのデータをJavaScriptオブジェクトとして扱います。サンプルプログラムは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <title>JavaScript→JSON→ローカルストレージ→JSON→JavaScript</title>
    <style>
    </style>
    <script>


    // Setボタンの処理
    window.addEventListener("load", function(){
        document.getElementById("setButton").onclick = function(){



            // JavaScriptオブジェクトにデータを設定
            var object = {};



            object.modified = "2011/04/15 Fri";
            object.items = new Array();



            object.items[0] = {};
            object.items[0].title = "タイトル1";

            object.items[0].url = "http://www.yahoo.co.jp/"



            object.items[1] = {};
            object.items[1].title = "タイトル2";

            object.items[1].url = "http://www.google.co.jp/"



            // itemsへデータを追加する場合の書き方例
            var data = {};

            data.title = "タイトル3";

            data.url = "http://twitter.com/"

            object.items.push(data);



            // JavaScriptオブジェクト→JSONデータに変換
            nativeJSON = JSON.stringify(object);



            // ローカルストレージへ保存
            localStorage.setItem('urlhistory', nativeJSON);



            document.getElementById("display").innerHTML = "set!";
        }

    }, false);



    // Getボタンの処理
    window.addEventListener("load", function(){
        document.getElementById("getButton").onclick = function(){



            // Setボタンで保存されたデータを取得
            var nativeJSON = localStorage.getItem('urlhistory');



            // JSONデータ→JavaScriptオブジェクトに変換
            var object = JSON.parse(nativeJSON);



            // オブジェクトからデータ取得
            var html = "modified:" + object.modified + "<BR>";



            for(var idx=0; idx < object.items.length; idx++) {
                html = html + "■items" + idx + "<BR>";

                html = html + "title:" + object.items[idx].title + "<BR>";

                html = html + "url:" + object.items[idx].url + "<BR>";

            }



            // 表示
            document.getElementById("display").innerHTML = html;



        }
    }, false);



    </script>
  </head>
  <body>
    <button id="setButton">
        Set
    </button>


    <button id="getButton">
        Get
    </button>
    <BR>


    <div id="display">display</div>


  </body>
</html>



このサンプルでは、 下図のように2つボタンがあり、

WS000109

まず、Setボタンを押すと、JavaScriptオブジェクト→JSON→ローカルストレージへ保存という動作をします。
 WS000110

次に、Getボタンを押すと、ローカルストレージ→JSON→JavaScriptオブジェクト→内容を表示という動作をします。

WS000111 

ローカルストレージから取り出したJSONデータを変換することで、JavaScriptオブジェクトとして使えるので、それをループで回して、HTML文を作成して表示しています。

0 件のコメント :

コメントを投稿