view web storage

  • /*
     * @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);
    	};
    });
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2011/04/11 17:07:54 - 2011-04-11