HTML5 local database

Tämä sivu toimii vain seuraavilla WebKit selaimilla:
Chrome/Safari 10+, Opera 10.5+, iOS 3.3+, Android 2.1+. Siis ei Firefox eikä IE9.
Firefox(Gecko) ja IE selaimilla tomivat vain WebStorage ja IndexedDb HTML5 sovellukset, eikä aina nekään

While Web SQL Database is supported in Chrome, Safari & Opera, Firefox and IE are unlikely to support it any time soon (Mozilla is philosophically opposed). Indexed Database has an early implementation in Firefox 4.0 Beta and Chrome dev channel. There's a good chance all browsers will support it in the future, but that's not yet clear.





Lisää jotakin tehtävälistaan:
      



    CSS3 ja JavaScript koodi

    <style>
    	body {
    	  color: #222;
    	  font: 14px Arial;
    	}
    	
    	body a {
    	  color: #3D5C9D;
    	  text-decoration: none;
    	}
    </style>
    
    <script>
      var html5db = {};
      var indexedDB = window.indexedDB || window.webkitIndexedDB ||
    				  window.mozIndexedDB;
      
      if ('webkitIndexedDB' in window) {
    	window.IDBTransaction = window.webkitIDBTransaction;
    	window.IDBKeyRange = window.webkitIDBKeyRange;
      }
      
      html5db.indexedDB = {};
      html5db.indexedDB.db = null;
      
      html5db.indexedDB.onerror = function(e) {
    	console.log(e);
      };
      
      html5db.indexedDB.open = function() {
    	var request = indexedDB.open("todos");
      
    	request.onsuccess = function(e) {
    	  var v = "1.99";
    	  html5db.indexedDB.db = e.target.result;
    	  var db = html5db.indexedDB.db;
    	  // We can only create Object stores in a setVersion transaction;
    	  if (v!= db.version) {
    		var setVrequest = db.setVersion(v);
      
    		// onsuccess is the only place we can create Object Stores
    		setVrequest.onerror = html5db.indexedDB.onerror;
    		setVrequest.onsuccess = function(e) {
    		  if(db.objectStoreNames.contains("todo")) {
    			db.deleteObjectStore("todo");
    		  }
      
    		  var store = db.createObjectStore("todo",
    			{keyPath: "timeStamp"});
      
    		  html5db.indexedDB.getAllTodoItems();
    		};
    	  }
    	  else {
    		html5db.indexedDB.getAllTodoItems();
    	  }
    	};
      
    	request.onerror = html5db.indexedDB.onerror;
      }
      
      html5db.indexedDB.addTodo = function(todoText) {
    	var db = html5db.indexedDB.db;
    	var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
    	var store = trans.objectStore("todo");
      
    	var data = {
    	  "text": todoText,
    	  "timeStamp": new Date().getTime()
    	};
      
    	var request = store.put(data);
      
    	request.onsuccess = function(e) {
    	  html5db.indexedDB.getAllTodoItems();
    	};
      
    	request.onerror = function(e) {
    	  console.log("Error Adding: ", e);
    	};
      };
      
      html5db.indexedDB.deleteTodo = function(id) {
    	var db = html5db.indexedDB.db;
    	var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
    	var store = trans.objectStore("todo");
      
    	var request = store.delete(id);
      
    	request.onsuccess = function(e) {
    	  html5db.indexedDB.getAllTodoItems();
    	};
      
    	request.onerror = function(e) {
    	  console.log("Error Adding: ", e);
    	};
      };
      
      html5db.indexedDB.getAllTodoItems = function() {
    	var todos = document.getElementById("todoItems");
    	todos.innerHTML = "";
      
    	var db = html5db.indexedDB.db;
    	var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
    	var store = trans.objectStore("todo");
      
    	// Get everything in the store;
    	var keyRange = IDBKeyRange.lowerBound(0);
    	var cursorRequest = store.openCursor(keyRange);
      
    	cursorRequest.onsuccess = function(e) {
    	  var result = e.target.result;
    	  if(!!result == false)
    		return;
      
    	  renderTodo(result.value);
    	  result.continue();
    	};
      
    	cursorRequest.onerror = html5db.indexedDB.onerror;
      };
      
      function renderTodo(row) {
    	var todos = document.getElementById("todoItems");
    	var li = document.createElement("li");
    	var a = document.createElement("a");
    	var t = document.createTextNode(row.text);
      
    	a.addEventListener("click", function() {
    	  html5db.indexedDB.deleteTodo(row.timeStamp);
    	}, false);
      
    	a.textContent = " [Delete]";
    	li.appendChild(t);
    	li.appendChild(a);
    	todos.appendChild(li)
      }
      
      function addTodo() {
    	var todo = document.getElementById("todo");
    	html5db.indexedDB.addTodo(todo.value);
    	todo.value = "";
      }
      
      function init() {
    	html5db.indexedDB.open();
      }
      
      window.addEventListener("DOMContentLoaded", init, false);
    </script>