HTML5に対応したWebブラウザでローカルストレージを利用するコードを紹介します。
概要
HTML5に対応したブラウザでは、ローカルストレージ(Local Storege)と呼ばれるブラウザのストレージ機能が利用できます。
ローカルストレージは、Keyに対応付けるValueデータを保存できる Key-Value型のストレージです。Cookieよりも大容量のデータを保存できます。(Cookieの容量上限は約4Kbyte)
値を保存する
書式
window.localStorage.setItem([キー名],[値]);
記述例
値を取得する
書式
[変数] = window.localStorage.getItem([キー名])
記述例
値を削除する
書式
window.localStorage.removeItem([キー名]);
記述例
値をすべて削除する
書式
window.localStorage.clear();
記述例
ローカルストレージに保存されている値の数を取得する
書式
window.localStorage.length
記述例
指定した位置のキーを取得する
書式
window.localStorage.key([インデックス]);
記述例
プログラム例
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function SaveKeyValue() {
if (window.localStorage != null) {
key = document.forms.form1.Text_key.value;
value = document.forms.form1.Text_value.value;
window.localStorage.setItem(key,value);
}
}
function LoadKeyValue() {
if (!window.localStorage != null) {
key = document.forms.form1.Text_key.value;
value = window.localStorage.getItem(key)
document.forms.form1.Text_value.value=value;
}
}
function RemoveKeyValue() {
if (!window.localStorage != null) {
key = document.forms.form1.Text_key.value;
window.localStorage.removeItem(key);
}
}
function ClearKeyValue() {
if (!window.localStorage != null) {
window.localStorage.clear();
}
}
</script>
</head>
<body>
<form id="form1">
Key <input id="Text_key" type="text" /><br/>
Value <input id="Text_value" type="text" /><br />
<input id="Button1" type="button" value="保存" onclick="SaveKeyValue()" /><br/>
<input id="Button2" type="button" value="読み込み" onclick="LoadKeyValue()" /><br />
<input id="Button3" type="button" value="削除" onclick = "RemoveKeyValue()" /><br />
<input id="Button4" type="button" value="すべてクリア" onclick="ClearKeyValue()" /><br />
</form>
</body>
</html>
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Key, Valueのテキストボックスにキー名と格納する値を入力します。入力後[保存]ボタンをクリックします。
一度ブラウザを終了し、ブラウザを再起動し、同じファイルを表示します。表示後Keyのテキストボックスに保存時に入力したキー名を入力します。入力後[読み込み]ボタンをクリックします。
キー名に対応付けて保存された値が読み出されValueのテキストボックスに表示されました。先に保存した値と同じ文字列が読み出されています。
保存したキー名を入力し[削除]ボタンをクリック、または、[すべてクリア]ボタンをクリックします。ローカルストレージからデータがクリアされます。クリア後、先に保存したキー名をKeyテキストボックスに入力し[読み込み]ボタンをクリックします。クリア後は値が空になっていることが確認できます。
ローカルストレージを用いたKey-Valueデータの読み込み、書きこみができました。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-06
作成日: 2014-08-15
