本文转自：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. D. Green and Black Tea

    先搞多的,搞到相等. (tmd上星期+上上星期简直是弱智,怎么也不会写,总是想着各种a/b,,,踢蹬) #include<bits/stdc++.h> #define lowbit(x) ...

  2. 10个经典的Java main 方法面试题

    1. 不用main方法如何定义一个类? 不行,没有main方法不能运行Java类. 在Java 7之前,你可以通过使用静态初始化运行Java类.但是,从Java 7 开始就不行了. 2. main() ...

  3. sessionStorage 、localStorage 和 cookie 之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  4. [转载]NoSQL数据库的基础知识

    关系型数据库和NoSQL数据库 什么是NoSQL 大家有没有听说过“NoSQL”呢?近年,这个词极受关注.看到“NoSQL”这个词,大家可能会误以为是“No!SQL”的缩写,并深感愤怒:“SQL怎么会 ...

  5. hibernate的配置文件

  6. Eclipse设置选中高亮显示（包含debug）

    如果不高亮显示了:工具栏里有个黄色小笔的图标,点一下就可以了,或者alt+shift+O 设置高亮显示:

  7. 图片原理解说（综合版：JPEG,PNG,BMP,GIF）

    JPEG: 首先说明 jpeg图片:JPEG是joint Photographic Experts Group(联合图像专家组)的缩写,文件后辍名为"．jpg"或"．jp ...

  8. myeclipse 10 载入新的项目报错Cannot return from outside a function or method

    myeclipse 10 载入新的项目报错Cannot return from outside a function or method 解决方法: 方法一: window -->prefere ...

  9. iOS中CollectionView由于多次点击造成错误的解决方案

    iOS中CollectionCiew由于多次点击,会给程序造成错误. 这个时候,我们可以用过手势类来进行判断和过滤. 但是,有一个快捷的解决方法,那就是给用户响应增加延时操作. 具体代码如下: [co ...

  10. IOS 7 Study - UISegmentedControl

    You would like to present a few options to your users from which they can pick anoption, through a U ...