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