1 <meta name="apple-touch-fullscreen" content="YES" />2 <meta name="apple-mobile-web-app-capable" content="yes" />3 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />4 <h1>IndexedDB Introspection V0.3</h1>5 6 <div id="info"></div>7 8 9 <script type="text/javascript">10 11 var request = indexedDB.open('database3', 18);12 var db = null;13 14 request.onsuccess = function(event) {15 db = event.target.result;16 refresh();17 }18 19 request.onerror = function(event) {20 logger.log(event);21 }22 23 request.onblocked = function(event) {24 logger.log(event);25 }26 27 request.onupgradeneeded = function(event) {28 db = event.target.result;29 30 // Remove all structures31 var i;32 for (i=0; i<db.objectStoreNames.length; i++)33 db.deleteObjectStore(db.objectStoreNames[i]);34 35 // Create new structures36 var objectStore = db.createObjectStore("config", { keyPath: "key" });37 }38 39 function insert_button() {40 var K = document.getElementById('new-key');41 var V = document.getElementById('new-value');42 43 insert(K.value, V.value);44 45 K.value = '';46 V.value = '';47 }48 49 function insert(k,v) {50 var transaction = db.transaction(["config"], "readwrite");51 52 // Do something when all the data is added to the database.53 transaction.oncomplete = function(event) {54 //alert("All done!");55 };56 57 transaction.onerror = function(event) {58 // Don't forget to handle errors!59 alert('ERROR: '+event.target.error.name);60 };61 62 var objectStore = transaction.objectStore("config");63 var request = objectStore.add({'key':k,'value':v});64 request.onsuccess = function(event) {65 refresh();66 };67 68 }69 70 function remove(k) {71 var request = db.transaction(["config"], "readwrite").objectStore("config").delete(k);72 request.onsuccess = function(event) {73 refresh();74 };75 }76 77 function modify(k,v) {78 /**79 * TODO: insert must be called only when remove callback80 */81 var request = db.transaction(["config"], "readwrite").objectStore("config").get(k);82 request.onsuccess = function(event) {83 var value = event.target.result;84 remove(k);85 insert(k,v);86 };87 }88 89 function refresh() {90 var info = document.getElementById('info');91 var s = '';92 93 s += '<table>';94 95 var objectStore = db.transaction("config").objectStore("config");96 objectStore.openCursor().onsuccess = function(event) {97 var cursor = event.target.result;98 if (cursor) {99 s+= '<tr><td>'+cursor.key+' <span class="del" onclick="remove(\''+cursor.key+'\')">[delete]</span></td><td><input onchange="modify(\''+cursor.key+'\', this.value)" value="'+cursor.value.value+'"></td></tr>';100 cursor.continue();101 } else {102 s += '<tr><td><input id="new-key" placeholder="Key"></td><td><input id="new-value" placeholder="Value"></td></tr>';103 s += '<tr><td class="noborder" colspan=2 style="text-align:center;" onclick="insert_button()"><button>Insert</button></td></tr>';104 s += '</table>';105 info.innerHTML = s;106 }107 };108 109 }110 111 </script>112 113 114 115 <style type="text/css">116 /* SOME STYLES */117 #info {118 margin:32px;119 padding:4px;120 border:dashed silver 1px;121 font-family:sans-serif;122 }123 124 #info table .del {125 font-size:80%;126 color:red;127 cursor:pointer;128 }129 130 #info table {131 width:100%;132 }133 134 #info table td {135 border:solid silver 1px;136 }137 138 #info table .noborder {139 border:none;140 }141 142 #info input {143 width:100%;144 margin:0;145 padding:0;146 border:none;147 }148 149 #info input:hover {150 background-color:#FFFFE0;151 }152 153 #info table td:first-child {154 width:200px;155 }156 157 </style>Este ShareCode tiene versiones:
- IndexedDB Introspection V0.4 Supe... (12/11/2012)
- IndexedDB Introspection V0.3 va... (24/04/2013)
- IndexedDB Introspection V0.3 va... (24/04/2013)
- IndexedDB Introspection V0.3 va... (24/04/2013)
- IndexedDB Introspection V0.3 va... (24/04/2013)
- IndexedDB Introspection V0.3 va... (24/04/2013)
Enlace
El enlace para compartir es: