1 var html5rocks = {};2 //window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;3 4 if ('webkitIndexedDB' in window) {5 window.IDBTransaction = window.webkitIDBTransaction;6 window.IDBKeyRange = window.webkitIDBKeyRange;7 }8 9 html5rocks.indexedDB = {};10 html5rocks.indexedDB.db = null;11 12 html5rocks.indexedDB.onerror = function(e) {13 console.log(e);14 };15 16 html5rocks.indexedDB.open = function() {17 var request = indexedDB.open("todos");18 19 request.onsuccess = function(e) {20 var v = 1;21 html5rocks.indexedDB.db = e.target.result;22 var db = html5rocks.indexedDB.db;23 // We can only create Object stores in a setVersion transaction;24 if (v != db.version) {25 var setVrequest = db.setVersion(v);26 27 // onsuccess is the only place we can create Object Stores28 setVrequest.onerror = html5rocks.indexedDB.onerror;29 setVrequest.onsuccess = function(e) {30 if(db.objectStoreNames.contains("todo")) {31 db.deleteObjectStore("todo");32 }33 34 var store = db.createObjectStore("todo",35 {keyPath: "timeStamp"});36 e.target.transaction.oncomplete = function() {37 html5rocks.indexedDB.getAllTodoItems();38 };39 };40 } else {41 request.transaction.oncomplete = function() {42 html5rocks.indexedDB.getAllTodoItems();43 };44 }45 };46 request.onerror = html5rocks.indexedDB.onerror;47 };48 49 html5rocks.indexedDB.addTodo = function(todoText) {50 var db = html5rocks.indexedDB.db;51 var trans = db.transaction(["todo"], "readwrite");52 var store = trans.objectStore("todo");53 54 var data = {55 "text": todoText,56 "timeStamp": new Date().getTime()57 };58 59 var request = store.put(data);60 61 request.onsuccess = function(e) {62 html5rocks.indexedDB.getAllTodoItems();63 };64 65 request.onerror = function(e) {66 console.log("Error Adding: ", e);67 };68 };69 70 html5rocks.indexedDB.deleteTodo = function(id) {71 var db = html5rocks.indexedDB.db;72 var trans = db.transaction(["todo"], "readwrite");73 var store = trans.objectStore("todo");74 75 var request = store.delete(id);76 77 request.onsuccess = function(e) {78 html5rocks.indexedDB.getAllTodoItems();79 };80 81 request.onerror = function(e) {82 console.log("Error Adding: ", e);83 };84 };85 86 html5rocks.indexedDB.getAllTodoItems = function() {87 var todos = document.getElementById("todoItems");88 todos.innerHTML = "";89 90 var db = html5rocks.indexedDB.db;91 var trans = db.transaction(["todo"], "readwrite");92 var store = trans.objectStore("todo");93 94 // Get everything in the store;95 var cursorRequest = store.openCursor();96 97 cursorRequest.onsuccess = function(e) {98 var result = e.target.result;99 if(!!result == false)100 return;101 102 renderTodo(result.value);103 result.continue();104 };105 106 cursorRequest.onerror = html5rocks.indexedDB.onerror;107 };108 109 function renderTodo(row) {110 var todos = document.getElementById("todoItems");111 var li = document.createElement("li");112 var a = document.createElement("a");113 var t = document.createTextNode(row.text);114 115 a.addEventListener("click", function() {116 html5rocks.indexedDB.deleteTodo(row.timeStamp);117 }, false);118 119 a.textContent = " [Delete]";120 li.appendChild(t);121 li.appendChild(a);122 todos.appendChild(li);123 }124 125 function addTodo() {126 var todo = document.getElementById("todo");127 html5rocks.indexedDB.addTodo(todo.value);128 todo.value = "";129 }130 131 function init() {132 html5rocks.indexedDB.open();133 }134 135 window.addEventListener("DOMContentLoaded", init, false);Enlace
El enlace para compartir es: