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>Este ShareCode tiene versiones:
- SuperTest window.indexedDB = wi... (24/04/2013)
- SuperTest window.indexedDB = wi... (24/04/2013)
- SuperTest window.indexedDB = wi... (24/04/2013)
- SuperTest window.indexedDB = wi... (24/04/2013)
Enlace
El enlace para compartir es: