HTML5

トップページへ戻る

データ系XHTML5(jQueryでlocalStorage)

JSONとは

ようするにデータを「keyとvalueの組」であると考える方法。仕組みはとても簡単なので、直感的に分かりやすいでしょう。

Javascriptに入っているものは「JSON=JavaScipt Object Notation(Javascriptのオブジェクトの表記法)」と言う。

javascriptが持っている機能の中でも、最もすばらしいものの一つで、最近特に注目が集まっています。

「オブジェクト」は「連想配列」とよばれることもあるが、Arrayとは全く別のものです。

しかし、配列のようにも扱える（lengthなどがあり、データの数を知ることができる）

一言で言えば「名札付きデータ」といったところか。固有名で検索するので、SQLが要らない。

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="UTF-8" />
 <title>連想配列</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script type="text/javascript">
  $(function(){
	
	//新しいJSONを作る
	var obj={};
	
	//キーとバリューを使って、データを入れる。
	obj={
    	"キー":"バリュー",
   		 "1":"はい",
   		 "hanrin":"バカ"
    };

	//配列のように、書く事も出来る。JSONの仕組みがより分りやすくなるだろう。
    // 添字に「文字列」を使ってある。これは「キー」。
    //これはデータの検索に使う。大事な事は、「同じキーは無い」ということだ。
    //もし同じキーがあれば、上書きされる。
    //「バリュー」を検索するときに、この文字列が使われるため、検索がとても速い。
	
	obj["hayashi"]="1222";
    obj["yamada"]="こんばんは";
    obj["usui"]="眠い";
    obj["usui"]=23;
    obj["umemoto"]="kagome";


    //ドット表記で、キーを指定し、内容を表示
    $("#disp").html("キー「hayashi」のバリュー="+obj.hayashi);


	//配列のように、添字でキーを指定
    $("#disp1").html("キー「usui」のバリュー="+obj["usui"]);
    

	//キーとバリューをjQueryを使って、全て書き出す 
	$.each(obj,function(key,value){
    	 $("#disp2").append("key="+key+" "+"value="+value+"<br/>");
     });

	//JSONの配列。配列の場合は、長さの分だけ、forでまわす。
	var arr=[
    	{"id":"100","name":"hanrin","mark":"70"},
    	{"id":"101","name":"yamada","mark":"80"},
    	{"id":"103","name":"ueki","mark":"90"}
    ];
	 for(i=0;i<arr.length;i++){
    	 var jobj=arr[i];
    	 $("#disp3").append("id="+jobj.id+" "+"名前="+jobj.name+" "+"点数="+jobj.mark+"<br/>");
     }

	//キー付きJSONオブジェクト
     var arr2={
     "item1":{"id":"104","name":"般林","mark":"10"},
     "item2":{"id":"105","name":"楠","mark":"100"},
     "item3":{"id":"106","name":"中林","mark":"90"}
     };
		 $.each(arr2,function(key,value){
    		 $("#disp4").append("キーは"+key+" id="+value.id+" "+"名前="+value.name+" "+"点数="+value.mark+"<br/>"); 
    	 });
     });
     </script>
 </head> 
 <body>
 <div id="disp">&nbsp;</div> 
 <div id="disp1">&nbsp;</div> 
 <hr />
     JSONの全ての内容:
     <div id="disp2">&nbsp;</div>
 <hr />
     JSON配列の内容：
     <div id="disp3">&nbsp;</div>
 <hr />
     キーを持っているJSONのオブジェクト一覧：
     <div id="disp4">&nbsp;</div> 
 </body> 
 </html>

問題１

以下の表(クロネコの料金表)をJSONにし、内容を全部表示させなさい(上の例のように、「id=101,name=般林…」の形式で出力すること）。

また、出来る人は「サイズ」と「宛先」をフォームから入力した時に、料金が表示されるようにしなさい。

★ヒント
フォームから来た文字列を使ってそのまま検索する事はできません。いったん「文字列」として式を作ってから、eval()を使って、「javascriptの式」として実行させる必要があります。オブジェクトの構成の仕方によっては、以下の操作が不必要になるかもしれません。

$("input:button").click(function(){
var skey=$("#size").val();
var ship=$("#to").val();
var sobj=eval("arr3['"+skey+"']");
$("#shiping").html(eval("sobj."+ship));
});

public_html/tomcat/html5/json.htmlとして保存しなさい。

クロネコヤマト料金表（北陸宛）
サイズ	北海道	関東	中部	北陸	関西	九州
60	1260	740	740	740	740	950
80	1470	950	950	950	950	1160
100	1680	1160	1160	1160	1160	1370
120	1890	1370	1370	1370	1370	1580
140	2100	1580	1580	1580	1580	1790
160	2310	1790	1790	1790	1790	2000

HTML5で追加された、localStorage

HTML5から、「localStorage」が追加されました。(storage=記憶装置）

これは、ブラウザにとても大きなデータを保存出来るオブジェクトです。(JSONの巨大なものです）

これを利用する事で、「データベース」の代わりに、ブラウザを利用出来ます。ただし、保存出来るデータは今の所、テキストデータに限られます。(JSONを保存するときは、いったん文字列に変換して保存し、取り出す時に再びJSONに直します）

ブラウザを閉じても、データは残っています。ブラウザを閉じた時に消えるものを「sessionStorage」と言います（使い方は同じです）。

これらを「Web Storage」と言います。Web Storageはkey value型（配列と同じ）のデータベースです。

一時的なデータの保管場所として使えます。

例 jsonlocals.html

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="UTF-8" />
 <title>ローカルストレージ練習</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script type="text/javascript">
  $(function(){
    
    //ローカルストレージは、初期化しなくてもいきなり使えます。
    //ただし、保存出来るデータは、文字列だけです。
    //普通のオブジェクトのように、値をセットできるが、
    //できるだけsetItem()メソッドを使うのが正しい使い方です。
	localStorage.hanrin="私は値です";
    localStorage.sa=2323;
    localStorage.hai=[32,33,34];localStorage["hayashi"]="1222";
    localStorage["yamada"]="こんばんは";
    localStorage["usui"]="眠い";
    localStorage["usui"]=23;
    localStorage["umemoto"]="kagome";

	//正しいセットの仕方。結果は上の例とおなじだけれども。
    localStorage.setItem("これが正しい","値だよ〜");

	//値を取り出すときも、getItem(キー)を使うのが正しいが、以下の２方法でも可。
    //ドット表記で、キーを指定する方法
    $("#disp").html("キー「hayashi」のバリュー="+localStorage.hayashi);
	//配列のように、添字でキーを指定する方法
    $("#disp1").html("キー「usui」のバリュー="+localStorage["usui"]);

	//これが正しい取り出し方。id=disp1に追加表示
    $("#disp1").append("<br />キー「umemoto」のバリュー="+localStorage.getItem("umemoto"));
    

	//localStorageではメソッドを使うのが普通。key()でキーを取得、getItem(キー)で値を取る
	//jqueryのeachで、全ての値を表示させてみます
	$.each(localStorage,function(k,v){
    	 var kk=localStorage.key(k);
    	 $("#disp2").append("key="+kk+" "+"value="+localStorage.getItem(kk)+"<br/>");
    });


	/* ----------  重要  ------------ */
    //localStorageにJSONを入れる。この時、JSON.stringify()を使って、文字列に直さないと、
    //[object object]という文字が入ってしまい、うまくいかない。

	var lobjset1={"id":"400","name":"高島","mark":"70"};
	localStorage.setItem("mark1",JSON.stringify(lobjset1));
	var lobjset2={"id":"401","name":"牛島","mark":"30"};
	localStorage.setItem("mark2",JSON.stringify(lobjset2));

	//localStorageからmark2を削除
	localStorage.removeItem("mark2");

	//localStorageから、オブジェクトを取り出す。この時、JSON.parse()で、オブジェクトに直してやる
    var lobj2=JSON.parse(localStorage.getItem("mark1"));
    //id=disp1に、追加表示
    $("#disp1").append("<br />localStorageから取り出したオブジェクトのnameの値="+lobj2.name);

	//localStorageを使い終わったら、値を全て削除しておきます（まだ準備段階なので）。
    localStorage.clear(); 

	//formからデータを追加。一覧表示	
	$("#put").click(function(){
	$("#disp2").empty();
	var lobjset1={"id":$("#id").val(),"name":$("#name").val(),"mark":$("#mark").val()};
	localStorage.setItem($("#id").val(),JSON.stringify(lobjset1));
		$.each(localStorage,function(k,v){
		    var kk=localStorage.key(k);
			var vv=JSON.parse(localStorage.getItem(kk));
			$("#disp2").append("key="+kk+" "+"id="+vv.id+" name="+vv.name+" mark="+vv.mark+"<br />");
		});
	});	
    });
    </script>
 </head> 
 <body>

<form action="">
<fieldset>
<legend>登録フォーム</legend>
<label for="id">ID</label><input type="text" id="id"/><br />
<label for="name">名前</label><input type="text" id="name"/><br />
<label for="mark">得点</label><input type="text" id="mark"/><br />
<input type="button" id="put" value="登録"/>
</fieldset>
</form>
<div id="disp">&nbsp;</div> 
 <div id="disp1">&nbsp;</div> 
 <hr />
    localStorageの全ての内容:
    <div id="disp2">&nbsp;</div>
 </body> 
 </html>

問題２

以下のビデオのように、商品オブジェクトををローカルストレージに登録し、一覧表示するアプリケーションを作ってください。
削除、更新も出来るようにしておいてください。

買い物かご

jQueryを利用して、このデータベースにアクセスし、買い物かごを作ってみましょう。

＊注意　localStorageは一個しか無いことに注意。前のデータが残っていると、プログラムが異常になる事があるので、そのための対策がひつようです。

(作り中）

※　補足

暇な人は（あまりいないと思うけど）研修旅行のページを作ってください

public_html/tomcat/html5/travel.html

に保存しておいてください。jQuery mobileでもxhtml5でも良いです。旅行から帰ったら、写真なども入れてもらいますので、
写真を撮ってきてください。

ホームへ

クロネコヤマト料金表（北陸宛）