コイケアキヨシ blog: HTML5 のWeb Storageを使ってみた

今回は、ローカルストレージと、セッションストレージを使ってみました！

■ローカルストレージ
下記のような簡単なサンプルを作りました。
storeにて値の登録を行います。そうすると、store dateに登録されている一覧が表示されます。

さらに追加で登録を行うと、下記のようになります。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('storage', function(event) {
//storageというイベントに対して、この関数の処理を追加します。
refreshKeyList();
}, false);
var store = function(key, value) {
//ローカルストレージに指定した、KeyとValueの組み合わせを登録します
localStorage.setItem(key, value);
};
var del = function(key) {
//ローカルストレージから指定したKeyのものを削除します
localStorage.removeItem(key);
//delete localStorage[key]; //こういう記述方法もできます
};
var allDel = function() {
localStorage.clear();
};
var refreshKeyList = function() {
var keyList = document.getElementById('keyList');
if(localStorage.length === 0) {
//ローカルストレージに格納されているデータのサイズを取得
keyList.innerHTML = '値が格納されていません';
return;
}
var list = '';
var table = tableCreater.table();
var tdKey = tableCreater.td('KEY');
var tdVal = tableCreater.td('VALUE');
var trTitle = tableCreater.tr();
trTitle.appendChild(tableCreater.td());
trTitle.appendChild(tdKey);
trTitle.appendChild(tdVal);
trTitle.appendChild(tableCreater.td());
table.appendChild(trTitle);
for(var i = 0; i < localStorage.length; i++) {
//ローカルストレージから指定番号のKey値を取得
var key = localStorage.key(i);
//ローカルストレージから指定したKey値にひもづけられている値を取得
var value = localStorage.getItem(key);
var td0 = tableCreater.td(i + 1);
var td1 = tableCreater.td(key);
var td2 = tableCreater.td(value);
var td3 = tableCreater.td('<input type="submit" value="del" onclick="del(\'' + key + '\');return false;"/>');
var tr = tableCreater.tr();
tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
}
keyList.innerHTML = '';
keyList.appendChild(table);
};
var tableCreater = function() {
return {
table: function() {
return document.createElement('table');
},
tr: function() {
return document.createElement('tr');
},
td: function(val) {
var td = document.createElement('td');
if(val) {
td.innerHTML = val;
}
return td;
},
};
}();
</script>
</head>
<body onload="refreshKeyList();">
<div style="border:solid 1px;padding:8px;">
<strong>store:</strong>
<table>
<tr><td>key</td><td>value</td></tr>
<tr><td><input type="text" id="key"/>:</td><td><input type="text" id="value"/><input type="submit" value="store" onclick="store(document.getElementById('key').value, document.getElementById('value').value); return false;"/></td></tr>
</table>
</div>
<div style="border:solid 1px;padding:8px;">
<strong>store data:</strong>
<div id="keyList"></div>
<input type="submit" value="all del" onclick="allDel();return false;" />
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.addEventListener('storage', function(event) {
 //storageというイベントに対して、この関数の処理を追加します。
 refreshKeyList();
}, false);
var store = function(key, value) {
 //ローカルストレージに指定した、KeyとValueの組み合わせを登録します
 localStorage.setItem(key, value);
};
var del = function(key) {
 //ローカルストレージから指定したKeyのものを削除します
 localStorage.removeItem(key);
 //delete localStorage[key]; //こういう記述方法もできます
};
var allDel = function() {
 localStorage.clear();
};
var refreshKeyList = function() {
 var keyList = document.getElementById('keyList');
 if(localStorage.length === 0) {
  //ローカルストレージに格納されているデータのサイズを取得
  keyList.innerHTML = '値が格納されていません';
  return;
 }
 var list = '';
 var table = tableCreater.table();
 var tdKey = tableCreater.td('KEY');
 var tdVal = tableCreater.td('VALUE');
 var trTitle = tableCreater.tr();
 trTitle.appendChild(tableCreater.td());
 trTitle.appendChild(tdKey);
 trTitle.appendChild(tdVal);
 trTitle.appendChild(tableCreater.td());
 table.appendChild(trTitle);
 
 for(var i = 0; i < localStorage.length; i++) {
  //ローカルストレージから指定番号のKey値を取得
  var key = localStorage.key(i);
  //ローカルストレージから指定したKey値にひもづけられている値を取得
  var value = localStorage.getItem(key);

  var td0 = tableCreater.td(i + 1);
  var td1 = tableCreater.td(key);
  var td2 = tableCreater.td(value);

  var td3 = tableCreater.td('<input type="submit" value="del" onclick="del(\'' + key  + '\');return false;"/>');

  var tr = tableCreater.tr();
  tr.appendChild(td0);
  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);

  table.appendChild(tr);
 }
 keyList.innerHTML = '';
 keyList.appendChild(table);
};
var tableCreater = function() {
 return {
  table: function() {
   return document.createElement('table');
   },
  tr: function() {
   return document.createElement('tr');
   },
  td: function(val) {
   var td =  document.createElement('td');
   if(val) {
    td.innerHTML = val;
   }
   return td;
   },
 };
}();
</script>
</head>
<body onload="refreshKeyList();">
<div style="border:solid 1px;padding:8px;">
<strong>store:</strong><br>
<table>
<tr><td>key</td><td>value</td></tr>
<tr><td><input type="text" id="key"/>:</td><td><input type="text" id="value"/><input type="submit" value="store" onclick="store(document.getElementById('key').value, document.getElementById('value').value); return false;"/></td></tr>
</table>

</div>
<br>
<div style="border:solid 1px;padding:8px;">
<strong>store data:</strong><br>
<div id="keyList"></div>
<input type="submit" value="all del" onclick="allDel();return false;" />
</div>
</body>
</html>

JavaのHashMapに値を格納するような感覚で使えます！
前回記述した通り、格納した値は消してあげないと消えません。
同一オリジン、同一ブラウザでなら、消されるまで値が保持されます。

■セッションストレージ
セッションストレージのサンプル
キャプチャ的には同じなので貼りません^_^;
基本的には、ローカルストレージのlocalstorageをsessionstorageに置換してあげれば使えます！
API的にも同じものが用意されています！

ただし！
前回説明した通り、別ウィンドウを開くと値はコピーされますが、
その瞬間だけ値が同じなだけでどちらかで更新してももう一方には反映されません！
上記のサンプルにて、試せるようにしてあるので実際に試してみてください。

こちらは、ウィンドウを閉じれば保持していた値は消えるので、特に気になるところはないな。
使い道は、、、別ウィンドウを開くときにパラメータとして渡したいってときぐらいしか使わないか？
渡せるけど、その画面から情報は受け取れないけどねｗ

■いちおうAPIを書いておきます
・メソッドについて

メソッド	解説
length	ストレージ内に格納されているデータ数
key(index)	指定されたインデックスのKeyを返す。存在しない場合はnullが返る
getItem(key)	指定されたKeyに対応する値を返す
setItem(key, data)	ストレージに指定したKey値で値を登録する
removeItem(key)	ストレージから指定されたKey値に対応するデータを削除する
clear()	すべてのデータをストレージから削除する

・storageイベントのプロパティについて

プロパティ	解説
key	変更されたKey。clear()メソッドが呼ばれた際にnull
oldValue	変更前の値(のコピー)。新しいキーで値が登録された場合はnull。
newValue	変更後の値(のコピー)。値が削除された場合にはnull。
url	イベント発生元のドキュメントURL。
storageArea	変更されたストレージへの参照。

使い方

view plain print ?

window.addEventListener('storage', function(event) {
// storageに何かイベントが発生したときに呼ばれる処理を記述する。
}, false);

window.addEventListener('storage', function(event) {
 // storageに何かイベントが発生したときに呼ばれる処理を記述する。
}, false);

なぜか、イベントで処理をするとブラウザがクラッシュすることがありますので、気をつけてください。
使い方が悪いのか？それともブラウザがまだちゃんと対応されていないのか？

コイケアキヨシ blog

2010年6月8日火曜日

HTML5 のWeb Storageを使ってみた

0 件のコメント:

コメントを投稿