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.5</h1>5 6 <div id="info"></div>7 8 9 <button onclick="super_test();">SuperTest</button>10 11 12 <script type="text/javascript">13 14 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;15 16 var request = indexedDB.open('database3', 28);17 var db = null;18 19 request.onsuccess = function(event) {20 db = event.target.result;21 logger.log(db);22 refresh();23 }24 25 request.onerror = function(event) {26 logger.log(event);27 }28 29 request.onblocked = function(event) {30 logger.log(event);31 }32 33 request.onupgradeneeded = function(event) {34 db = event.target.result;35 36 // Remove all structures37 var i;38 for (i=0; i<db.objectStoreNames.length; i++)39 db.deleteObjectStore(db.objectStoreNames[i]);40 41 // Create new structures42 var objectStore = db.createObjectStore("config", { keyPath: "key" });43 }44 45 function insert_button() {46 var K = document.getElementById('new-key');47 var V = document.getElementById('new-value');48 49 insert(K.value, V.value);50 51 K.value = '';52 V.value = '';53 }54 55 function super_test() {56 var transaction = db.transaction(["config"], "readwrite");57 58 var log1 = logger.log('Starting...');59 var counter = 0;60 61 transaction.oncomplete = function(event) {62 refresh();63 };64 65 transaction.onerror = function(event) {66 // Don't forget to handle errors!67 alert('ERROR: '+event.target.error.name);68 };69 70 var objectStore = transaction.objectStore("config");71 72 for (i=0;i<10000;i++) {73 var request = objectStore.add({'key':(''+i+''),'value':('Content '+i)});74 request.onsuccess = function(event) {75 counter++;76 log1.innerHTML = counter;77 };78 }79 80 }81 82 function insert(k,v) {83 var transaction = db.transaction(["config"], "readwrite");84 85 // Do something when all the data is added to the database.86 transaction.oncomplete = function(event) {87 //alert("All done!");88 };89 90 transaction.onerror = function(event) {91 // Don't forget to handle errors!92 alert('ERROR: '+event.target.error.name);93 };94 95 var objectStore = transaction.objectStore("config");96 var request = objectStore.add({'key':k,'value':v});97 request.onsuccess = function(event) {98 refresh();99 };100 101 }102 103 function remove(k) {104 var request = db.transaction(["config"], "readwrite").objectStore("config").delete(k);105 request.onsuccess = function(event) {106 refresh();107 };108 }109 110 function modify(k,v) {111 /**112 * TODO: insert must be called only when remove callback113 */114 var request = db.transaction(["config"], "readwrite").objectStore("config").get(k);115 request.onsuccess = function(event) {116 var value = event.target.result;117 remove(k);118 insert(k,v);119 };120 }121 122 function refresh() {123 var info = document.getElementById('info');124 var s = '';125 126 s += '<table>';127 128 var objectStore = db.transaction("config").objectStore("config");129 objectStore.openCursor().onsuccess = function(event) {130 var cursor = event.target.result;131 if (cursor) {132 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>';133 cursor.continue();134 } else {135 s += '<tr><td><input id="new-key" placeholder="Key"></td><td><input id="new-value" placeholder="Value"></td></tr>';136 s += '<tr><td class="noborder" colspan=2 style="text-align:center;" onclick="insert_button()"><button>Insert</button></td></tr>';137 s += '</table>';138 info.innerHTML = s;139 }140 };141 142 }143 144 </script>145 146 147 148 <style type="text/css">149 /* SOME STYLES */150 #info {151 margin:32px;152 padding:4px;153 border:dashed silver 1px;154 font-family:sans-serif;155 }156 157 #info table .del {158 font-size:80%;159 color:red;160 cursor:pointer;161 }162 163 #info table {164 width:100%;165 }166 167 #info table td {168 border:solid silver 1px;169 }170 171 #info table .noborder {172 border:none;173 }174 175 #info input {176 width:100%;177 margin:0;178 padding:0;179 border:none;180 }181 182 #info input:hover {183 background-color:#FFFFC0;184 }185 186 #info table td:first-child {187 width:200px;188 }189 190 </style>Este ShareCode tiene versiones:
- SuperTest window.indexedDB = wi... (12/11/2012)
- IndexedDB Introspection V0.5 Supe... (24/04/2013)
- IndexedDB Introspection V0.5 Supe... (24/04/2013)
- IndexedDB Introspection V0.5 Supe... (24/04/2013)
- IndexedDB Introspection V0.5 Supe... (24/04/2013)
- IndexedDB Introspection V0.5 Supe... (24/04/2013)
Enlace
El enlace para compartir es: