今回は、ローカルストレージと、セッションストレージを使ってみました！
■ローカルストレージ
下記のような 簡単なサンプルを作りました。
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 | 変更されたストレージへの参照。 |
使い方
- window.addEventListener('storage', function(event) {
-
- }, false);
window.addEventListener('storage', function(event) {
// storageに何かイベントが発生したときに呼ばれる処理を記述する。
}, false);
なぜか、イベントで処理をするとブラウザがクラッシュすることがありますので、気をつけてください。
使い方が悪いのか？それともブラウザがまだちゃんと対応されていないのか？
