Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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>
Enlace
El enlace para compartir es: