ローカル ストレージ (Local Storage) の変更イベントを利用する - JavaScript
JavaScriptでローカル ストレージ (Local Storage) の変更イベントを利用するコードを紹介します。
概要
JavaScriptのローカル ストレージでは、ローカルストレージの変更イベントを利用できます。
プログラム
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var key = 'MY_VALUE';
function StorageChange(event) {
var elem = document.getElementById('output');
elem.innerText = window.localStorage.getItem(key);
}
function SaveKeyValue() {
if (window.localStorage != null) {
value = document.forms.form1.Text_value.value;
window.localStorage.setItem(key,value);
}
}
function keyUp() {
SaveKeyValue();
}
function load() {
window.addEventListener('storage', StorageChange);
var elem = document.getElementById('Text_value');
elem.addEventListener('keyup', keyUp);
}
</script>
</head>
<body onload="load();">
<form id="form1">
Value <input id="Text_value" type="text" /><br />
</form>
<hr/>
出力:<span id="output"></span>
</body>
</html>
解説
ページが読み込まれるとloadイベントが呼び出され、下記のコードが実行されます。
function load() {
window.addEventListener('storage', StorageChange);
var elem = document.getElementById('Text_value');
elem.addEventListener('keyup', keyUp);
}
下記のコードにより、ローカルストレージのイベントリスナを登録します。ローカルストレージに変更があった場合に、StorageChange関数が呼び出される動作になります。windowオブジェクトのaddEventListenerメソッドを呼び出し、"storege"イベントに追加します。
window.addEventListener('storage', StorageChange);
テキストボックスの要素をgetElementByIdで取得し、addEventListenerメソッドを呼び出し、"keyup"イベントに追加します。今回KeyDownイベントではなく、KeyUpイベントを利用する理由については
こちらの記事を参照してください。
var elem = document.getElementById('Text_value');
elem.addEventListener('keyup', keyUp);
テキストボックスにキーの入力があると、KeyUp関数が呼び出されます。KeyUp関数はSaveKeyValue関数を呼び出します。 SaveKeyValue関数では、テキストボックスに入力されている値を取得し、ローカルストレージに書き込みます。今回のプログラムではローカルストレージのキーは'MY_VALUE'(key 変数の値)としています。
ローカルストレージへの値の書き込みの詳細は
こちらの記事を参照してください。
function keyUp() {
SaveKeyValue();
}
function SaveKeyValue() {
if (window.localStorage != null) {
value = document.forms.form1.Text_value.value;
window.localStorage.setItem(key,value);
}
}
localStorage.setItem メソッドでローカルストレージの内容が変更されると、loadイベントで登録されたイベントリスナである、StoregeChange関数が呼び出されます。StoregeChange関数では、getElementById 関数を呼び出し出力エリアのspan タグの要素を取得し、innerTextプロパティにローカルストレージに保存されている値を出力します。
function StorageChange(event) {
var elem = document.getElementById('output');
elem.innerText = window.localStorage.getItem(key);
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
テキストボックスに文字を入力します。文字を入力するとすぐに[出力]エリアに入力した文字が表示されます。
文字を入力するとすぐに出力のエリアに文字が反映されます。
文字の入力により、ローカルストレージが更新されると、storage イベントのリスナに設定されたStoregeChange 関数が呼び出され、画面が更新される動作が確認できました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
