本文转自：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 索引型数据库的待办事项简要列表的更多相关文章

  1. sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复

    sql2005数据库置疑修复断电崩溃索引损坏 数据库索引错误修复/数据库表损坏/索引损坏/系统表混乱等问题修复 客 户 名 称 济南某电子商务公司 数 据 类 型 SQL2005数据库 故 障 检 测 ...

  2. 面试技巧，如何通过索引说数据库优化能力,内容来自Java web轻量级开发面试教程

    上星期写了一个篇文章,数据库方面的面试技巧,如何从建表方面展示自己能力,承蒙管理员抬举,放入首页,也承蒙各位厚爱,两天内收获了将近770个点击,也一度进入48小时热榜. 为了感谢管理员和大家的支持,再 ...

  3. 关于数据库管理系统DBMS--关系型数据库（MySQL/MariaDB）

    数据库的结构(3种):层次,网状,关系型(用的最多): DBMS的三层模型: 视图层:面向最终用户: 逻辑层:面向程序员或DBA: 物理层:面向系统管理员: 关系型数据库管理系统——RDBMS: 主要 ...

  4. 非关系统型数据库-mangodb

    第三十六课 非关系统型数据库-mangodb 目录 二十四 mongodb介绍 二十五 mongodb安装 二十六 连接mongodb 二十七 mongodb用户管理 二十八 mongodb创建集合. ...

  5. MongoDB，无模式文档型数据库简介

    MongoDB的名字源自一个形容词humongous(巨大无比的),在向上扩展和快速处理大数据量方面,它会损失一些精度,在旧金山举行的MondoDB大会上,Merriman说:“你不适宜用它来处理复杂 ...

  6. key-value键值型数据库：Redis

    key-value键值型数据库:Redis redis Redis是in-memory型(内存型)的键值数据库,数据在磁盘上是持久的,键类型是字符串,值类型是字符串.字符串集合(Set).sorted ...

  7. 什么是分析型数据库PostgreSQL版

    分析型数据库PostgreSQL版(原HybridDB for PostgreSQL)为您提供简单.快速.经济高效的 PB 级云端数据仓库解决方案.分析型数据库PostgreSQL版 兼容 Green ...

  8. 阿里下一代云分析型数据库AnalyticDB入选Forrester云化数仓象限

    前言 近期, 全球权威IT咨询机构Forrester发布"The Forrester Wave: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型数 ...

  9. 阿里巴巴下一代云分析型数据库AnalyticDB入选Forrester Wave™ 云数仓评估报告 解读

    前言近期, 全球权威IT咨询机构Forrester发布"The Forrester WaveTM: CloudData Warehouse Q4 2018"研究报告,阿里巴巴分析型 ...

随机推荐

  1. linux中less命令使用

    less与cat和more的区别: cat命令功能用于显示整个文件的内容单独使用没有翻页功能因此经常和more命令搭配使用,cat命令还有就是将数个文件合并成一个文件的功能. more命令功能:让画面 ...

  2. ASP.NET MVC- Upload File的例子

    上传文件是一项基本功能,一定要了解的.先来看一下使用ASP.NET MVC实现简单的上传. 一.简单的例子 Controller的例子 public ActionResult UploadDemo() ...

  3. Castle IOC容器组件生命周期管理

    主要内容 1．生命处理方式 2．自定义生命处理方式 3．生命周期处理 一．生命处理方式 我们通常创建一个组件的实例使用new关键字,这样每次创建出来的都是一个新的实例,如果想要组件只有一个实例,我们会 ...

  4. aspnetpager的2种分页方法

    <webdiyer:AspNetPager ID="AspNetPager1" UrlPaging="True" PageSize="20&qu ...

  5. UI：页面传值、单例模式传值、属性传值、NSUserDefaults 数据持久化

    <单页面传值> 页面传值,从前向后传值,使用属性,在后一个页面定义属性,在前一个页面,用点语法,获得值,在适当的时候传值 页面传值,从后向前面传值,使用协议和代理,在后一个页面指定协议,定 ...

  6. vector中的erase方法[转+补充]

    注释如下: iterator erase(iterator it);       // 删除指定元素,并返回删除元素后一个元素的位置(如果无元素,返回end())iterator erase(iter ...

  7. 响应式的dribbble作品集魔术布局展示效果

    在线演示1 本地下载 相信做设计的朋友肯定都知道dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话 ...

  8. 5.ScrollView无法填充满屏幕

    问题: <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.D ...

  9. Java final修饰形参

    转自:http://java.chinaitlab.com/base/836044.html public class BB{ public int i; } public class PP{ pub ...

  10. Java 多线程编程两个简单的样例

    /** * @author gao */ package gao.org; public class RunnableDemo implements Runnable{ @Override publi ...