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>