Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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