Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>indexeddb</title>
- <style type="text/css">
- #todos li span { display: none; }
- </style>
- <script src="/jslib/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- // events
- $(function () {
- $('[type=submit]').on('click', function (e) {
- html5rocks.indexedDB.addTodo($('#todo').val());
- $('#todo').val('');
- return false;
- });
- $('#todos').on('click', '.delete', function (e) {
- html5rocks.indexedDB.deleteTodo(parseInt($(this).parent().find('span').text()));
- return false;
- });
- html5rocks.indexedDB.open(); // open displays the data previously saved
- });
- // indexeddb
- window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
- window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
- window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
- var html5rocks = {}; // namespace (not required)
- html5rocks.indexedDB = {}; // open, addTodo, getAllTodoItems, deleteTodo - are own methods
- html5rocks.indexedDB.db = null; // holds the real instance of the indexedDB
- // open/create
- html5rocks.indexedDB.open = function() {
- // you must increment the version by +1 in order to get the 'onupgradeneeded' event called
- // ONLY there you can modify the db itself e.g create new object stores and etc.
- var request = indexedDB.open('todos', 5);
- console.log(request);
- request.onupgradeneeded = function(e) {
- console.log('onupgradeneeded', e);
- html5rocks.indexedDB.db = e.target.result;
- var db = html5rocks.indexedDB.db;
- console.log('db', db);
- if(!db.objectStoreNames.contains('todo')){
- db.createObjectStore('todo', {keyPath: 'timeStamp', autoIncrement: true});
- }
- };
- request.onsuccess = function(e) {
- console.log('onsuccess', e);
- html5rocks.indexedDB.db = e.target.result;
- var db = html5rocks.indexedDB.db;
- console.log('db', db);
- // START chrome (obsolete - will be removed)
- if (typeof db.setVersion === 'function') {
- var versionReq = db.setVersion(3);
- versionReq.onsuccess = function (e) {
- console.log('versionReq', e);
- html5rocks.indexedDB.db = e.target.source; // instead of result
- var db = html5rocks.indexedDB.db;
- console.log('db', db);
- if(!db.objectStoreNames.contains('todo')){
- db.createObjectStore('todo', {keyPath: 'timeStamp', autoIncrement: true});
- }
- }
- }
- // END chrome
- html5rocks.indexedDB.getAllTodoItems();
- };
- };
- // add
- html5rocks.indexedDB.addTodo = function(todoText) {
- var db = html5rocks.indexedDB.db;
- var trans = db.transaction(['todo'], 'readwrite');
- var store = trans.objectStore('todo');
- var request = store.put({
- 'text': todoText,
- 'timeStamp' : new Date().getTime()
- });
- request.onsuccess = function(e) {
- // Re-render all the todo's
- html5rocks.indexedDB.getAllTodoItems();
- };
- request.onerror = function(e) {
- console.log(e.value);
- };
- };
- // read
- html5rocks.indexedDB.getAllTodoItems = function() {
- $('#todos').html('');
- var db = html5rocks.indexedDB.db;
- var trans = db.transaction(['todo'], 'readwrite');
- 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 = html5rocks.indexedDB.onerror;
- };
- // delete
- html5rocks.indexedDB.deleteTodo = function(id) {
- var db = html5rocks.indexedDB.db;
- var trans = db.transaction(['todo'], 'readwrite');
- var store = trans.objectStore('todo');
- var request = store.delete(id);
- request.onsuccess = function(e) {
- html5rocks.indexedDB.getAllTodoItems(); // Refresh the screen
- };
- request.onerror = function(e) {
- console.log(e);
- };
- };
- // helper
- function renderTodo(row) {
- var li = '<li>'+row.text+'<a href="#" class="delete">[Delete]</a><span>'+row.timeStamp+'</span></li>';
- $('#todos').append(li);
- }
- </script>
- </head>
- <body>
- <section class="shell">
- <ul id="todos">
- </ul>
- <input type="text" id="todo" name="todo" placeholder="What do you need to do?" />
- <input type="submit" value="Add Todo Item" />
- </section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement