Want more features on Pastebin? Sign Up, it's FREE!
Guest

IndexedDB-FIXED-2012-08-06-Html5Rocks-TodoList-Demo

By: a guest on Aug 5th, 2012  |  syntax: JavaScript  |  size: 4.71 KB  |  views: 1,861  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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>
clone this paste RAW Paste Data