2015

10

15

HTML5のWeb Storage使ってスケジュール表作ってやんよ!!!

スポンサードリンク


Web Storageの基礎知識

Web Storageとは?

HTML5で追加された機能で、入力したデータをクライアントサイドのデータベース(ブラウザ)に保存できるようになります。
これまではクッキー(cookie)がありましたが、保存できるデータが1ドメイン当たり4Kバイトに制限されています。
HTML5のローカルデータベースを使えば、データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことが可能になり、数Mバイトのデータを保存できるようになります。

通常のデータベースの様にデータをサーバーサイドに蓄積して、アクセスした人が同じデータを表示・編集・保存できますが、Web Storageではクライアントサイド側にデータを保持するため、他のクライアントが自分が保持しているデータにアクセスすることはできません。

Web Storageの機能の種類

Web StorageにはsessionStoragelocalStorageの2種類のストレージが用意されています。
機能 ウィンドウ(タブ)同士でデータの共有 データの有効期限 データ量の上限
クッキー 指定期限まで有効 4KBに制限
sessionStorage × ウィンドウやタブを
閉じるまで有効
1オリジン当たり5MB
localStorage 永続的に有効 1オリジン当たり5MB

sessionStorage

データベースはブラウザのウィンドウ単位で作成されます。
ブラウザのウィンドウを閉じると、データベースは消滅しデータは失われてしまいます。
その後、再びブラウザを起動して同じページにアクセスしても、以前に保存したデータにアクセスすることはできません。

ただし、ウインドウを開いている間は、ページを遷移しても同じデータを保持しています。
従って、あるページで入力したデータを別のページで利用するといった用途に利用できます。
ひとつのクライアントで二つのブラウザのウィンドウを開いて、それぞれのウィンドウから同じページを開いた場合、それぞれのページで利用するデータベースは別々になります。

localStorage

データベースはサーバー単位で作成し、同じサーバー内のすべてのページがデータベースを共有します。
従って、あるページで作成したデータベースを同じサーバー内の全く関係がない別のページで消去してしまうといったことが起こってしまいます。
sessionStorageと最も異なる点は、ブラウザのウィンドウを閉じたりPCの電源を切ったりした後もデータベースの内容が保持されるのでアプリケーンヨンを終了した後も、残しておきたいデータを保存するのに適しています。

Web Storageの対応ブラウザ

2015年10月現在、主要ブラウザでの対応状況は最新版では対応済みですが、お使いのブラウザのバージョンによってはまだ未対応の場合があるため、以下のスクリプトで確認することができます。
// Web Storageの対応ブラウザ確認
if(!localStorage) {
	alert("このブラウザはlocalStorageを利用できません");
}
if(!sessionStorage) {
	alert("このブラウザはsessionStorageを利用できません");
}

IEはローカル環境でWeb Storageを使えない

Web Storageを組み込んだHTMLファイルをPCのローカル環境でIE9で開くとストレージが利用できない旨のアラートが出ます。
IE8からサポートをしていますが、Web Storageを利用するためにはHTTPプロトコルでHTMLファイルにアクセスする必要があります。

Web Storageのデータの保存・読み出しの方法

Web Storageでデータを保存し、読み出す書式は3通りとなります。

メソッドによるデータの保存と読み出し

// データの保存
localStorage.setltem(キー,値);
// キーを指定したデータの読み出し
v = localStorage.getItem(キー);

プロパティによるデータの保存と読み出し

// データの保存
localStorage.キー = 値;
// キーを指定したデータの読み出し
v = localStorage.キー;

連想配列(ハッシュ)形式によるデータの保存と読み出し

// データの保存
localStorage[キー] = 値;
// キーを指定したデータの読み出し
v = localStorage[キー];

Web Storageには文字列しか保存できない

Web Storageにデータを保存する際の注意点として、Web Storageには文字列しか保存できないことがあります。
数値として「12」をlocalStorageに保存した後、読み出して+演算子で「3」を加えようとするとデータの「12」は文字列としてのデータになるため、そのままでは文字列「123」となってしまいます。
読み出した値を数値として扱う場合はparseIntメソッドで数値化する必要がありますので注意してください。

HTMLとJavaScriptでスケジュール表を作成

Web Storageの基礎知識を踏まえた上で、この便利なWeb Storageの機能を使って簡易的なスケジュール表を作成したいと思います。
今回はブラウザを閉じても登録したスケジュール情報を保持できるように、localStorageのストレージを用います。
下記コードを実装して作成したデモがコチラ(※Chromeブラウザ推奨)

HTML

<body onload="load()">
<form>
	月日:<input type="date" id="input1"><br>
	内容:<input type="text" id="input2"><br>
    <button type="button" onClick="input()">予定を登録</button>
</form>
<div id="output">
	<table border cellpadding="5">
    	<tr><th>月日</th><th>内容</th><th>削除</th></tr>
     </table>
</div>        
</body>

JavaScript

var a = new Array();

// HTML文章の読み込み完了時に実行(※1)
function load() {
	// localStoprageからキーyoteiに対する値を読み出す
	var ls = localStorage.getItem("yotei");
	if(ls != null){
		// 読み出した値をJSON.parseして配列に代入
		a = JSON.parse(ls);
	} else {
		a = [];
	}
	show();
}

// 「値を入れたらクリック」ボタンをクリック時に実行(※4)
function input() {
	if(document.getElementById("input1").value == "" || document.getElementById("input2").value == "") {
		alert("入力値が空白です");
	} else {
		a.push({"gappi" : document.getElementById("input1").value, "memo" : document.getElementById("input2").value});
		save();
	}
}

// 「削除」ボタンがクリックされたら実行(※6)
function deleteValue(x) {
	a.splice(x, 1);
	save();
}

// 配列aの要素を昇順に並べてテーブル形式で画面に表示(※3)
function show() {
	var s = '<table border ' + 
			 'cellpadding = "5" ' + 
			 '<tr><th>月日</th><th>内容</th><th>削除</th></tr>';
	sorting();
	
	for (var i = 0; i < a.length; i++) {
		s += '<tr>';
		for(var p in a[i]) {
			s += '<td>' + a[i][p] + '</td>';
		}
		
		s += '<td><button type="button" onclick="deleteValue(' + i + ')">削除</button></td>';
		s += '</tr>';
		
	}
	
	s += '</table>';
	document.getElementById("output").innerHTML = s;
}


// 配列aをlocalStorageに保存した後、昇順に並べて画面に表示(※5)
function save() {
	localStorage.setItem("yotei" , JSON.stringify(a));
	show();
}

// 配列の要素を昇順に並び替え(※2)
function sorting() {
	for(var i = 0; i < a.length; i++) {
		a[i] = JSON.stringify(a[i]);
	}
	a.sort();
	for(i = 0; i < a.length; i++) {
		a[i] = JSON.parse(a[i]);
	}
}

処理の概要

データの読み込み

  • ・HTMLの読み込みが完了したら、body要素onLoadを発動、localStorageからgetItem関数で”yotei”の値を読み込み、JSON.parse関数でJSON文字列をオブジェクトに変換して配列aに格納(※1)
  • ・配要aをfor文でJSON.stringify関数でオブジェクト⇒JSON 文字列に変換し、昇順に並び替え後、再びJSON.parseでオブジェクトに変換(※2)
  • ・並び替えられた配列aを1項目ごとにテーブル形式タグで生成し、画面に表示(※3)

データの追加

  • ・button要素の「予定を登録」をクリックでinput要素の「月日」(キーを”gappi”に)と「内容」(キーを”memo”に)の値を取得して、配列aに格納(※4)
  • ・配列aにキー名”yotei”を指定してlocalStorage.setItemでローカルストレージに保存(※5)
  • ・配要aをfor文でJSON.stringify関数でオブジェクト⇒JSON 文字列に変換し、昇順に並び替え後、再びJSON.parseでオブジェクトに変換(※2)
  • ・並び替えられた配列aを1項目ごとにテーブル形式タグで生成し、画面に表示(※3)

データの削除

  • ・ローカルストレージのデータとして出力されたデータに生成したbutton要素「削除」に該当する要素(連想配列)を削除(※6)
  • ・以下はデータの追加項目の保存(※5)並び替え(※2)表示(※3)と同処理を実行


トップへ