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>
このサンプルでは、 下図のように２つボタンがあり、
まず、Setボタンを押すと、JavaScriptオブジェクト→JSON→ローカルストレージへ保存という動作をします。
次に、Getボタンを押すと、ローカルストレージ→JSON→JavaScriptオブジェクト→内容を表示という動作をします。
ローカルストレージから取り出したJSONデータを変換することで、JavaScriptオブジェクトとして使えるので、それをループで回して、HTML文を作成して表示しています。
コメント
コメントを投稿