本文转自：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. user is not in the sudoers file.This incident will be reported

    我用普通用户ssk登陆,想让ssk成为拥有超级用户的权限的普通用户 开始提示输入密码错误 ,然后就这样了   解决方法如下: 1>.进入超级用户模式.也就是输入"su -", ...

  2. 在XAF(ASP.NET)中以ListEditor的形式调用百度地图API

    因为项目需要,在系统中使用地图显示设备的地理位置.考虑过ArgGIS,Bing和Baidu地图.本来想用ArgGIS,看教程嫌麻烦.所以还是用Web地图吧.Bing的话还要申请个key,没心情.百度地 ...

  3. url中的scheme

    iPhone上URL Schemes的作用为应用程序提供了一个其他应用程序或者safari可以启动他的方法. --http://blog.sina.com.cn/s/blog_5673c12f0100 ...

  4. Gson 和 Fastjson 你不知道的事

    背景 目前在公司负责的业务, 主要是跟JSON数据打交道, fastjson .gson都用, 他们适用于不同场景.fastjson号称是业界处理json效率最高的框架, 没有之一.但在某些场景下, ...

  5. Notepad++配置Python运行环境

    转自:http://www.cnblogs.com/zhcncn/p/3969419.html Notepad++配置Python开发环境   1. 安装Python 1 下载 我选择了32位的2.7 ...

  6. nutch-2.2.1 hadoop-1.2.1 hbase-0.92.1 集群部署

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  7. DP总结 ——QPH

    常见优化 单调队列 形式 dp[i]=min{f(k)} dp[i]=max{f(k)} 要求 f(k)是关于k的函数 k的范围和i有关 转移方法 维护一个单调递增(减)的队列,可以在两头弹出元素,一 ...

  8. android activity 跳转传值问题研究

    intent = new Intent(); intent.setClass(LoginActivity.this, RegActivity.class); startActivity(intent) ...

  9. iOS开发——实战OC篇&环境搭建之纯代码（玩转UINavigationController与UITabBarController）

    iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)   这里我们就直接上实例: 一:新建一个项目singleV ...

  10. iOS开发——UI篇Swift篇&玩转UItableView（二）高级功能

    UItableView高级功能 class UITableViewControllerAF: UIViewController, UITableViewDataSource, UITableViewD ...