1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5.     <title>indexeddb</title>
  6.     <style type="text/css">
  7.         #todos li span { display: none; }
  8.     </style>
  9.     <script src="/jslib/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
  10.     <script type="text/javascript" charset="utf-8">
  11.         // events
  12.         $(function () {
  13.             $('[type=submit]').on('click', function (e) {
  14.                 html5rocks.indexedDB.addTodo($('#todo').val());
  15.                 $('#todo').val('');
  16.                 return false;
  17.             });
  18.  
  19.             $('#todos').on('click', '.delete', function (e) {
  20.                 html5rocks.indexedDB.deleteTodo(parseInt($(this).parent().find('span').text()));
  21.                 return false;
  22.             });
  23.  
  24.             html5rocks.indexedDB.open(); // open displays the data previously saved
  25.         });
  26.  
  27.         // indexeddb
  28.         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
  29.         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
  30.         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
  31.  
  32.         var html5rocks = {}; // namespace (not required)
  33.         html5rocks.indexedDB = {}; // open, addTodo, getAllTodoItems, deleteTodo - are own methods
  34.         html5rocks.indexedDB.db = null; // holds the real instance of the indexedDB
  35.  
  36.         // open/create
  37.         html5rocks.indexedDB.open = function() {
  38.             // you must increment the version by +1 in order to get the 'onupgradeneeded' event called
  39.             // ONLY there you can modify the db itself e.g create new object stores and etc.
  40.             var request = indexedDB.open('todos', 5);
  41.             console.log(request);
  42.            
  43.             request.onupgradeneeded = function(e) {
  44.                 console.log('onupgradeneeded', e);
  45.  
  46.                 html5rocks.indexedDB.db = e.target.result;
  47.                 var db = html5rocks.indexedDB.db;
  48.                 console.log('db', db);
  49.  
  50.                 if(!db.objectStoreNames.contains('todo')){
  51.                     db.createObjectStore('todo', {keyPath: 'timeStamp', autoIncrement: true});
  52.                 }
  53.             };
  54.  
  55.             request.onsuccess = function(e) {
  56.                 console.log('onsuccess', e);
  57.                 html5rocks.indexedDB.db = e.target.result;
  58.                 var db = html5rocks.indexedDB.db;
  59.                 console.log('db', db);
  60.  
  61.                 // START chrome (obsolete - will be removed)
  62.                 if (typeof db.setVersion === 'function') {
  63.                     var versionReq = db.setVersion(3);
  64.                     versionReq.onsuccess = function (e) {
  65.                         console.log('versionReq', e);
  66.  
  67.                         html5rocks.indexedDB.db = e.target.source; // instead of result
  68.                         var db = html5rocks.indexedDB.db;
  69.                         console.log('db', db);
  70.  
  71.                         if(!db.objectStoreNames.contains('todo')){
  72.                             db.createObjectStore('todo', {keyPath: 'timeStamp', autoIncrement: true});
  73.                         }
  74.                     }
  75.                 }
  76.                 // END chrome
  77.  
  78.                 html5rocks.indexedDB.getAllTodoItems();
  79.             };
  80.         };
  81.  
  82.         // add
  83.         html5rocks.indexedDB.addTodo = function(todoText) {
  84.             var db = html5rocks.indexedDB.db;
  85.             var trans = db.transaction(['todo'], 'readwrite');
  86.             var store = trans.objectStore('todo');
  87.             var request = store.put({
  88.                 'text': todoText,
  89.                 'timeStamp' : new Date().getTime()
  90.             });
  91.  
  92.             request.onsuccess = function(e) {
  93.                 // Re-render all the todo's
  94.                 html5rocks.indexedDB.getAllTodoItems();
  95.             };
  96.  
  97.             request.onerror = function(e) {
  98.                 console.log(e.value);
  99.             };
  100.         };
  101.  
  102.         // read
  103.         html5rocks.indexedDB.getAllTodoItems = function() {
  104.             $('#todos').html('');
  105.            
  106.             var db = html5rocks.indexedDB.db;
  107.             var trans = db.transaction(['todo'], 'readwrite');
  108.             var store = trans.objectStore('todo');
  109.  
  110.             // Get everything in the store;
  111.             var keyRange = IDBKeyRange.lowerBound(0);
  112.             var cursorRequest = store.openCursor(keyRange);
  113.  
  114.             cursorRequest.onsuccess = function(e) {
  115.                 var result = e.target.result;
  116.                 if(!!result == false)
  117.                     return;
  118.  
  119.                 renderTodo(result.value);
  120.                 result.continue();
  121.             };
  122.  
  123.             cursorRequest.onerror = html5rocks.indexedDB.onerror;
  124.         };
  125.  
  126.         // delete
  127.         html5rocks.indexedDB.deleteTodo = function(id) {
  128.             var db = html5rocks.indexedDB.db;
  129.             var trans = db.transaction(['todo'], 'readwrite');
  130.             var store = trans.objectStore('todo');
  131.  
  132.             var request = store.delete(id);
  133.  
  134.             request.onsuccess = function(e) {
  135.                 html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen
  136.             };
  137.  
  138.             request.onerror = function(e) {
  139.                 console.log(e);
  140.             };
  141.         };
  142.  
  143.         // helper
  144.         function renderTodo(row) {
  145.             var li = '<li>'+row.text+'<a href="#" class="delete">[Delete]</a><span>'+row.timeStamp+'</span></li>';
  146.             $('#todos').append(li);
  147.         }
  148.     </script>
  149. </head>
  150. <body>
  151. <section class="shell">
  152.     <ul id="todos">
  153.  
  154.     </ul>
  155.     <input type="text" id="todo" name="todo" placeholder="What do you need to do?" />
  156.     <input type="submit" value="Add Todo Item" />
  157. </section>
  158. </body>
  159. </html>