/*
* @title view web storage
* @description web storage viewer for smartphone
* @include http://*
* @license MIT License
* @require jquery
*/
var css = [
'body {',
' margin: 0;',
' padding: 0;',
'}',
'h1 {',
' font-size: 20px;',
' text-align: center;',
' padding: 10px;',
' margin: 0;',
'}',
'h2 {',
' font-size: 18px;',
' text-align: center;',
' padding: 10px;',
' background: #EEE;',
'}',
'table {',
' width: 100%;',
' border-collapse: collapse;',
' font-size: 14px;',
'}',
'td, th {',
' border: 1px solid #333;',
' padding: 5px;',
'}',
'th {',
' background: #e2e7ff;',
'}',
].join('');
var html = [
'<h1>storage確認ページ</h1>',
'<h2>sessionStorage</h2>',
'<table id="sessionStorage">',
' <col width="30%">',
' <col width="50%">',
' <col width="20%">',
' <tr>',
' <th>キー</th>',
' <th>値</th>',
' <th>削除</th>',
' </tr>',
'</table>',
'',
'<h2>localStorage</h2>',
'<table id="localStorage">',
' <col width="30%">',
' <col width="50%">',
' <col width="20%">',
' <tr>',
' <th>キー</th>',
' <th>値</th>',
' <th>削除</th>',
' </tr>',
'</table>'
].join('');
$('head').empty().append( $('<style>').text(css) );
$('body').empty().append( html );
["sessionStorage", "localStorage"].forEach(function(storageName) {
var storage = window[storageName];
var $table = $("#" + storageName);
var $rm = $("<button>").text("削除").click(function() {
var $tr = $(this).parents("tr");
if (window.confirm("削除しますか？")) {
var key = $tr.find("th").text();
storage.removeItem(key);
$tr.fadeOut();
}
});
var key,val;
for (var i = 0, len = storage.length; i < len; i++) {
key = storage.key(i);
val = storage[key];
$("<tr>")
.append( $("<td>").text(key) )
.append( $("<td>").text(val) )
.append( $("<td>").append($rm.clone()) )
.appendTo($table);
};
});
