[转]使用 HTML5 索引型数据库的待办事项简要列表

本文转自：http://www.html5rocks.com/zh/tutorials/indexeddb/todo/

<!DOCTYPE html>
<html>
  <head>
  <style>
  body {
  color: #222;
  font: 14px Arial;
  }

  body a {
  color: #3D5C9D;
  text-decoration: none;
  }
  </style>
  <script>
  var html5rocks = {};
  window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB;

  if ('webkitIndexedDB' in window) {
  window.IDBTransaction = window.webkitIDBTransaction;
  window.IDBKeyRange = window.webkitIDBKeyRange;
  }

  html5rocks.indexedDB = {};
  html5rocks.indexedDB.db = null;

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

  html5rocks.indexedDB.open = function() {
  var request = indexedDB.open("todos");

  request.onsuccess = function(e) {
  var v = 1;
  html5rocks.indexedDB.db = e.target.result;
  var db = html5rocks.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 = html5rocks.indexedDB.onerror;
  setVrequest.onsuccess = function(e) {
  if(db.objectStoreNames.contains("todo")) {
  db.deleteObjectStore("todo");
  }

  var store = db.createObjectStore("todo",
  {keyPath: "timeStamp"});
  e.target.transaction.oncomplete = function() {
  html5rocks.indexedDB.getAllTodoItems();
  };
  };
  } else {
  request.transaction.oncomplete = function() {
  html5rocks.indexedDB.getAllTodoItems();
  };
  }
  };
  request.onerror = html5rocks.indexedDB.onerror;
  };

  html5rocks.indexedDB.addTodo = function(todoText) {
  var db = html5rocks.indexedDB.db;
  var trans = db.transaction(["todo"], "readwrite");
  var store = trans.objectStore("todo");

  var data = {
  "text": todoText,
  "timeStamp": new Date().getTime()
  };

  var request = store.put(data);

  request.onsuccess = function(e) {
  html5rocks.indexedDB.getAllTodoItems();
  };

  request.onerror = function(e) {
  console.log("Error Adding: ", e);
  };
  };

  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();
  };

  request.onerror = function(e) {
  console.log("Error Adding: ", e);
  };
  };

  html5rocks.indexedDB.getAllTodoItems = function() {
  var todos = document.getElementById("todoItems");
  todos.innerHTML = "";

  var db = html5rocks.indexedDB.db;
  var trans = db.transaction(["todo"], "readwrite");
  var store = trans.objectStore("todo");

  // Get everything in the store;
  var cursorRequest = store.openCursor();

  cursorRequest.onsuccess = function(e) {
  var result = e.target.result;
  if(!!result == false)
  return;

  renderTodo(result.value);
  result.continue();
  };

  cursorRequest.onerror = html5rocks.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() {
  html5rocks.indexedDB.deleteTodo(row.timeStamp);
  }, false);

  a.textContent = " [Delete]";
  li.appendChild(t);
  li.appendChild(a);
  todos.appendChild(li);
  }

  function addTodo() {
  var todo = document.getElementById("todo");
  html5rocks.indexedDB.addTodo(todo.value);
  todo.value = "";
  }

  function init() {
  html5rocks.indexedDB.open();
  }

  window.addEventListener("DOMContentLoaded", init, false);
  </script>
  </head>
  <body>
  <ul id="todoItems"></ul>
  <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
  <input type="submit" value="Add Todo Item" onclick="addTodo(); return false;"/>
  </body>
</html>

[转]使用 HTML5 索引型数据库的待办事项简要列表相关推荐

html5待办事项模板,使用HTML5本地存储实现的待办事项列表
CSS 语言: CSSSCSS 确定 /* base, reset, and utility */ html { box-sizing: border-box; } *, *:before, *:af ...
缓存型数据库Redis的配置与优化
文章目录一.什么是缓存 1.1 buffer与cache 1.2 各层缓存的位置二.关系型数据库和非关系型数据库 2.1关系型数据库 2.2 非关系型数据库 2.3 两者之间的区别 2.4 非关系 ...
电脑待办事项软件推荐,电脑上记录待办事项用哪个工具
很多人在日常办公中都离不开使用电脑,很多事情都要借助电脑上的一些工具来记录,可用于日常工作中记录待办事项的软件是比较多的,大家在选择这类软件时,往往比较看重软件的口碑.品质等,不可能找到一个去试验一个 ...
适用于Android的最佳免费待办事项列表应用程序以及如何使自己成才
如果您没有组织任务,那么跟踪任务可能会很麻烦. 这就是待办事项清单的帮助. 在这篇文章中,我将向您展示一些适用于Android的最佳免费待办事项列表应用程序. 然后,我将为您提供一些有关如何创建自己的 ...
学习型索引在数据库中的应用实践
9月29日,我们邀请到开务数据库研发工程师邹彤老师与大家一起研读大咖论文,主题为<学习型索引在数据库中的应用实践>. 索引是数据库引擎的重要组成部分,在当下数据井喷式爆发的阶段,如何高效准 ...
关于事物型数据库的索引原理
1.二分查找算法二分查找法的时间复杂度为Ο(log2n).大家如果有兴趣可以去验证一下这个结果,这里我就不做解释了. 我们具体来感受一下二分查找法有多强大,假设:集合里面有40亿个元素,排序方式为从 ...
剖析云计算中的“共享型数据库”(转载)
一.摘要随着云计算的出现,出现了很多新的名词,像云数据库.云存储.弹性扩容,资源隔离等词汇.下面就大家炒的比较热的"共享型数据库"做一下解释,给大家剖析什么叫"共享型 ...
回首2018 | 分析型数据库AnalyticDB：不忘初心砥砺前行...
导读分析型数据库AnalyticDB(下文简称"ADB"),是阿里巴巴自主研发.唯一经过超大规模以及核心业务验证的PB级实时数据仓库.截止目前,现有外部支撑客户既包括传统的大中型 ...
mongodb单表最大记录数_SpringBoot+Cloud全家桶微服务实战项目之文档型数据库MongoDB四...
一.MongoDB简介以及使用场景 MongoDB 是一个跨平台的,面向文档的数据库,是当前 NoSQL 数据库产品中最热门的一种.它介于关系数据库和非关系数据库之间,是非关系数据库当中功能最丰富, ...
剖析云平台中的“共享型数据库”
剖析云计算中的"共享型数据库" 摘要: 随着云计算的出现,出现了很多新的名词,像云数据库.云存储.弹性扩容,资源隔离等词汇.下面就大家炒的比较热的"共享型数据库&q ...

[转]使用 HTML5 索引型数据库的待办事项简要列表

[转]使用 HTML5 索引型数据库的待办事项简要列表相关推荐

最新文章

热门文章