Develop your todo list app with indexedDB

gyc567

浏览: 96592 次
性别:
来自: 深圳

最近访客更多访客>>

王豪_thomas

baiyibing

y61759h

youngcoder

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

---------------------------------the HTML code is :---------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo List App</title>

-------------------------------and css is :---------------------------------

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body, html {
padding: 0;
margin: 0;
}

body {
font-family: Helvetica, Arial, sans-serif;
color: #545454;
background: #F7F7F7;
}

#page-wrapper {
width: 550px;
margin: 2.5em auto;
background: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 3px;
}

#new-todo-form {
padding: 0.5em;
background: #0088CC;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

#new-todo {
width: 100%;
padding: 0.5em;
font-size: 1em;
border-radius: 3px;
border: 0;
}

#todo-items {
list-style: none;
padding: 0.5em 1em;
margin: 0;
}

#todo-items li {
font-size: 0.9em;
padding: 0.5em;
background: #FFF;
border-bottom: 1px solid #EEE;
margin: 0.5em 0;
}

input[type="checkbox"] {
margin-right: 10px;
}

-------------------------------db.js is :------------------------------------------------

/**
* @file A module for interacting with the DB.
* @author Matt West <matt.west@kojilabs.com>
* @license MIT {@link http://opensource.org/licenses/MIT}.
*/

var todoDB = (function() {
var tDB = {};
var datastore = null;

/**
   * Open a connection to the datastore.
   */
tDB.open = function(callback) {
    // Database version.
    var version = 1;

// Open a connection to the datastore.
var request = indexedDB.open('todos', version);

    // Handle datastore upgrades.
    request.onupgradeneeded = function(e) {
      var db = e.target.result;

e.target.transaction.onerror = tDB.onerror;

      // Delete the old datastore.
      if (db.objectStoreNames.contains('todo')) {
        db.deleteObjectStore('todo');
      }

      // Create a new datastore.
      var store = db.createObjectStore('todo', {
        keyPath: 'timestamp'
      });
    };

    // Handle successful datastore access.
    request.onsuccess = function(e) {
      // Get a reference to the DB.
      datastore = e.target.result;

      // Execute the callback.
      callback();
    };

// Handle errors when opening the datastore.
request.onerror = tDB.onerror;
};

/**
   * Fetch all of the todo items in the datastore.
   * @param {function} callback A function that will be executed once the items
   *                            have been retrieved. Will be passed a param with
   *                            an array of the todo items.
   */
tDB.fetchTodos = function(callback) {
    var db = datastore;
    var transaction = db.transaction(['todo'], 'readwrite');
    var objStore = transaction.objectStore('todo');

var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = objStore.openCursor(keyRange);

var todos = [];

    transaction.oncomplete = function(e) {
      // Execute the callback function.
      callback(todos);
    };

    cursorRequest.onsuccess = function(e) {
      var result = e.target.result;

      if (!!result == false) {
        return;
      }

      todos.push(result.value);

result.continue();
};

cursorRequest.onerror = tDB.onerror;
};

/**
   * Create a new todo item.
   * @param {string} text The todo item.
   */
tDB.createTodo = function(text, callback) {
    // Get a reference to the db.
    var db = datastore;

// Initiate a new transaction.
var transaction = db.transaction(['todo'], 'readwrite');

// Get the datastore.
var objStore = transaction.objectStore('todo');

    // Create a timestamp for the todo item.
    var timestamp = new Date().getTime();

    // Create an object for the todo item.
    var todo = {
      'text': text,
      'timestamp': timestamp
    };

// Create the datastore request.
var request = objStore.put(todo);

    // Handle a successful datastore put.
    request.onsuccess = function(e) {
      // Execute the callback function.
      callback(todo);
    };

// Handle errors.
request.onerror = tDB.onerror;
};

/**
   * Delete a todo item.
   * @param {int} id The timestamp (id) of the todo item to be deleted.
   * @param {function} callback A callback function that will be executed if the
   *                            delete is successful.
   */
tDB.deleteTodo = function(id, callback) {
    var db = datastore;
    var transaction = db.transaction(['todo'], 'readwrite');
    var objStore = transaction.objectStore('todo');

    var request = objStore.delete(id);

    request.onsuccess = function(e) {
      callback();
    }

    request.onerror = function(e) {
      console.log(e);
    }
};

// Export the tDB object.
return tDB;
}());
--------------------------app.js is ---------------------

/**
* @file The main logic for the Todo List App.
* @author Matt West <matt.west@kojilabs.com>
* @license MIT {@link http://opensource.org/licenses/MIT}.
*/

// Update the list of todo items.
function refreshTodos() {
todoDB.fetchTodos(function(todos) {
    var todoList = document.getElementById('todo-items');
    todoList.innerHTML = '';

    for(var i = 0; i < todos.length; i++) {
      // Read the todo items backwards (most recent first).
      var todo = todos[(todos.length - 1 - i)];

      var li = document.createElement('li');
      // var checkbox = document.createElement('input');
      // checkbox.type = "checkbox";
      // checkbox.className = "todo-checkbox";
      // checkbox.setAttribute("data-id", todo.timestamp);

      var deleteBtn = document.createElement('input');
      deleteBtn.type = "button";
      deleteBtn.value="This item is Done";
      deleteBtn.className = "todo-deleteBtn";
      deleteBtn.setAttribute("data-id-delete", todo.timestamp);

     // li.appendChild(checkbox);


      var span = document.createElement('span');
      span.innerHTML = todo.text;

      li.appendChild(span);
      li.appendChild(deleteBtn);
      todoList.appendChild(li);

      // Setup an event listener for the checkbox.
      // checkbox.addEventListener('click', function(e) {
      //   var id = parseInt(e.target.getAttribute('data-id'));

      //   //todoDB.deleteTodo(id, refreshTodos);
      // });

       // Setup an event listener for the button.
      deleteBtn.addEventListener('click', function(e) {
        var id = parseInt(e.target.getAttribute('data-id-delete'));

        todoDB.deleteTodo(id, refreshTodos);
      });
    }

});
}

分享到：

(How to Write a (Lisp) Interpreter (in P ... | ubuntu wifi issue for Qualcomm Atheros Q ...

2015-04-12 13:47
浏览 459
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论