PSI Labs RSS feed

JavaScriptのちょっとした便利機能:ConsoleオブジェクトとStorageオブジェクト

こんにちは。shintaniです。

色々経験を積むと、却って新規に追加された便利機能を知らず、昔ながらの手間の掛かるやり方を使い続けたりしてしまいます。
それを避けるために時々は入門・初心者本を読むことにしています。

今回はその中で知った便利な機能2つを紹介します。
記事タイトルを見て「知ってるよジョーシキでしょ」と思った人は記事を閉じて大丈夫です m(_ _)m

※本記事は「改定新版 JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで(山田祥寛著)」の内容を参考にしました

---------------------------------------------------------------

【Consoleオブジェクト】
デバックでJavaScriptの中で処理される値を確認する際、遥か昔ではalertをその時だけ入れて画面表示、
多少新しくなった後は F12で表示される開発者ツールでデバック実行+ウォッチ式、という感じで確認していました。

しかしConsoleオブジェクトを使えば、開発者ツールのコンソール部分に色々と出力することが可能です。

<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript">

			function consoleOutput(){
				var testInput = document.getElementById('test_input');
				console.log('testInput:' + testInput);
				console.log('入力された値は 「'+ testInput.value + '」 です');
			}
		window.onload = function(){
				console.log('ロード完了');
		};
		</script>
	</head>
	<body>
		Colsoleテスト
		<br/>
		<input type="text" id="test_input" name="test_input"  length=10 />
		<br/>
		<input type="button" onclick="consoleOutput();" value="コンソール出力ボタン " />
		<br/>
	</body>
</html>

①上記のhtmlの初期表示は以下のようになります。

②値を入力しボタンを押下すると、F12で表示される開発者ツールのConsoleタブにこのように表示されます。

いちいちデバック実行することもなく、ましてやalertで画面表示する必要もなくなりました。

*******************************************************************************************

【Storageオブジェクト】

StorageオブジェクトとはHTML5から追加された機能で「ローカルマシンにデータを保存できる」というものです。
ローカルマシンにデータを保存する機能としては昔からクッキーがありましたが、下記のような違いがあります。
----------------------------------------------
データサイズの上限: Storageは5M、Cookieは4K
データの有効期限: Storageはなし、Cookieはあり
データ通信: Storageは発生しない、Cookieはリクエストのたびに毎回送信
----------------------------------------------

このようなことから、「元々の検索条件をStorageに保存しておき、進んだ先の画面から戻った場合に同じ条件で再検索する」
というようなことをする場合に便利です。

これまではサーバ側でsessionに保存していました。
しかし大量アクセスされるサーバではサーバ側メモリが問題になりますし、かつ保存・取得処理が結構面倒だったりします。

【注記】Google Chromeではローカルファイル上でもStorageは動作しますが、IEはサーバ上でしか動作しない模様です

<html lang="ja">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
			function saveStorage(){
				var storage  = localStorage;      // オリジン(スキーマ://ホスト名:ポート番号) 単位で値保持
				// var storage  = sessionStorage;    // セッション単位で値保持。ブラウザを閉じると消える。
	
				var storageKey = document.getElementById('storageKey').value;
				if(storageKey == ""){
					alert("ストレージKeyが未入力です");
					exit;
				}
				var storageValue = document.getElementById('storageValue').value;
				storage.setItem(storageKey,storageValue);
			}

			function loadStorage(){
				var storage  = localStorage;
				// var storage  = sessionStorage;
				var storageKey = document.getElementById('storageKey').value;
				if(storageKey == ""){
					alert("ストレージKeyが未入力です");
					exit;
				}

				var storageValue = storage.getItem(storageKey);
				document.getElementById('storageValue').value = storageValue;
			}
		</script>
	</head>
	<body>
		Storageテスト
		<br/>
		ストレージのKeyを入力:<input type="text" id="storageKey" name="storageKey"  length=10 />
		<br/>
		ストレージのvalueを入力<input type="text" id="storageValue" name="storageValue"  length=10 />
		<br/>
		<input type="button" onclick="saveStorage();" value="Storage保存ボタン " />
		<br/>
		<input type="button" onclick="loadStorage();" value="Storageから取り出し " />
		<br/>
	</body>
</html>

① Keyとvalueそれぞれに入力を行って、値の保存と取得を行う画面です。

② 設定された値はGoogle chromeでは開発者ツール上で確認することが可能です(IEの開発者ツールでは未確認)

値の設定・取得の記述方法はこれ以外にもあります。
また設定されている値をループ的にすべて取得する方法もあります。
詳しくは別途調査下さい。

では失礼致します。