2015

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

Pocket

Web Storageの基礎知識

Web Storageとは？

HTML5で追加された機能で、入力したデータをクライアントサイドのデータベース（ブラウザ）に保存できるようになります。これまではクッキー(cookie)がありましたが、保存できるデータが１ドメイン当たり４Ｋバイトに制限されています。 HTML5のローカルデータベースを使えば、データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことが可能になり、数Ｍバイトのデータを保存できるようになります。通常のデータベースの様にデータをサーバーサイドに蓄積して、アクセスした人が同じデータを表示・編集・保存できますが、Web Storageではクライアントサイド側にデータを保持するため、他のクライアントが自分が保持しているデータにアクセスすることはできません。

Web Storageの機能の種類

Web StorageにはsessionStorageとlocalStorageの２種類のストレージが用意されています。

機能	ウィンドウ(タブ)同士でデータの共有	データの有効期限	データ量の上限
クッキー	○	指定期限まで有効	4KBに制限
sessionStorage	×	ウィンドウやタブを閉じるまで有効	1オリジン当たり5MB
localStorage	○	永続的に有効	1オリジン当たり5MB

sessionStorage

データベースはブラウザのウィンドウ単位で作成されます。ブラウザのウィンドウを閉じると、データベースは消滅しデータは失われてしまいます。その後、再びブラウザを起動して同じページにアクセスしても、以前に保存したデータにアクセスすることはできません。ただし、ウインドウを開いている間は、ページを遷移しても同じデータを保持しています。従って、あるページで入力したデータを別のページで利用するといった用途に利用できます。ひとつのクライアントで二つのブラウザのウィンドウを開いて、それぞれのウィンドウから同じページを開いた場合、それぞれのページで利用するデータベースは別々になります。

localStorage

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

Web Storageの対応ブラウザ

2015年10月現在、主要ブラウザでの対応状況は最新版では対応済みですが、お使いのブラウザのバージョンによってはまだ未対応の場合があるため、以下のスクリプトで確認することができます。

// Web Storageの対応ブラウザ確認
if(!localStorage) {
	alert("このブラウザはlocalStorageを利用できません");
}
if(!sessionStorage) {
	alert("このブラウザはsessionStorageを利用できません");
}

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

Web Storageを組み込んだHTMLファイルをＰＣのローカル環境で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文章の読み込み完了時に実行（※１）
function load() {
	// localStoprageからキーyoteiに対する値を読み出す
	var ls = localStorage.getItem("yotei");
	if(ls != null){
		// 読み出した値をJSON.parseして配列に代入
		a = JSON.parse(ls);
	} else {
		a = [];
	}
	show();
}

// 「値を入れたらクリック」ボタンをクリック時に実行（※４）
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();
	}
}

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

// 配列aの要素を昇順に並べてテーブル形式で画面に表示（※３）
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に保存した後、昇順に並べて画面に表示（※５）
function save() {
	localStorage.setItem("yotei" , JSON.stringify(a));
	show();
}

// 配列の要素を昇順に並び替え（※２）
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に格納（※１）
・配要aをfor文でJSON.stringify関数でオブジェクト⇒JSON 文字列に変換し、昇順に並び替え後、再びJSON.parseでオブジェクトに変換（※２）
・並び替えられた配列aを１項目ごとにテーブル形式タグで生成し、画面に表示（※３）

データの追加

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

データの削除

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