本文转自：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. CentOS 安装 gcc

    centos linux默认可以采用yum方式安装,则采用如下命令安装gcc编译器即可:#yum -y install gcc 系统会自动安装gcc及依赖组件 gcc                 ...

  2. 微信get post请求到微信服务器 模版 素材操作

    1:素材管理 官方文档 package org.konghao.weixin.media; import java.io.File; import java.io.IOException; impor ...

  3. insertAfter()

    <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript window.on ...

  4. 编程异常——假设你报createSQLQuery is not valid without active transaction,...

    非常多时候我们使用hibernate的session时,都是让session在某一执行环境中保持其唯一. 比如在同一线程内用同一个session.在同一方法内用同一session,这样我们就能够用se ...

  5. LVS测试小结

    RedHat5实现负载均衡 http://blog.sina.com.cn/s/blog_4e424e2101007rie.html http://www.doc88.com/p-9975618478 ...

  6. python批量GBK转UTF-8

    有时候编码问题在导入工程的时候很烦,所以还是让世界都是"UTF-8"吧. 抄来一段代码: #!/usr/env python # -*- coding: utf8 -*- impo ...

  7. 【机器学习算法-python实现】决策树-Decision tree（1） 信息熵划分数据集

    (转载请注明出处:http://blog.csdn.net/buptgshengod) 1.背景 决策书算法是一种逼近离散数值的分类算法,思路比較简单,并且准确率较高.国际权威的学术组织,数据挖掘国际 ...

  8. 安卓高手之路之 WindowManager

    安卓中的画面不是纯粹由window组成.而是改成了window+view的组织模式.window是一个顶层窗口的概念.view就相当于在window内的控件.而subwindow则是依附于window ...

  9. zoj-3626 Treasure Hunt I （树形dp）

    本文出自   http://blog.csdn.net/shuangde800 题目链接: zoj-3626 题意 给一棵n个节点的树, 节点编号1~n, 每个节点有权值val[i],经过这个节点就可 ...

  10. C++11 之for 新解

     前言     C++11这次的更新带来了令非常多C++程序猿期待已久的for range循环,每次看到javascript. lua里的for range.心想要是C++能有多好,心里别提多酸了.这 ...