indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’，只要熟悉了API操作起来也很简单。

大体流程是这样

1.打开数据库

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;

if ('webkitIndexedDB' in window) {    window.IDBTransaction = window.webkitIDBTransaction;    window.IDBKeyRange = window.webkitIDBKeyRange;}//这个就不解释了

var request = indexedDB.open("adsageIDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）request.onsuccess = function(e) { //异步    var v = "1.00";var db = e.target.result;

if (v!= db.version) {var setVrequest = db.setVersion(v);        setVrequest.onsuccess = function(e) { //异步            if(db.objectStoreNames.contains("todo")) {                db.deleteObjectStore("todo");            }var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键        }    }    }

这样就 创建/连接 了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

//插入数据 暂时只插入一列 var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction var store = trans.objectStore("todo");//创建Store//要操作数据必须建立transaction 和 Store

var data = {    "text": todoText,    "adsid": new Date().getTime()};//一个小数据 adsid是主键

var request = store.put(data); //‘强行’插入

request.onsuccess = function(e) {//成功后执行一些操作};

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

//读取数据var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = trans.objectStore("todo");

var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest = store.openCursor(keyRange);//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数//另一种方法是get() 这个就比较简单了直接store.get('键值')就行

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

    console.log(result.value);    result.continue(); //循环读取所有数据};

//删除数据...store.delete('键值') ...

出了一个小demo

<!DOCTYPE html><html>  <head>    <script>var indexedDB = window.indexedDB || window.webkitIndexedDB ||                      window.mozIndexedDB;

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

      adsageIDB = {};      adsageIDB.db = null;

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

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

        request.onsuccess = function(e) {var v = "1.00";          adsageIDB.db = e.target.result;var db = adsageIDB.db;

if (v!= db.version) {var setVrequest = db.setVersion(v);

            setVrequest.onerror = adsageIDB.onerror;            setVrequest.onsuccess = function(e) {if(db.objectStoreNames.contains("todo")) {                db.deleteObjectStore("todo");              }

var store = db.createObjectStore("todo",                {keyPath: "adsid"});

              adsageIDB.getAllTodoItems();            };          }else {            adsageIDB.getAllTodoItems();          }        };

        request.onerror = adsageIDB.onerror;      }

      adsageIDB.addTodo = function(todoText) {var db = adsageIDB.db;var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = trans.objectStore("todo");

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

var request = store.put(data);

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

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

      adsageIDB.deleteTodo = function(id) {var db = adsageIDB.db;var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = trans.objectStore("todo");

var request = store.delete(id);

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

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

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

var db = adsageIDB.db;var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);var store = trans.objectStore("todo");

var keyRange = IDBKeyRange.lowerBound(0);var cursorRequest = store.openCursor(keyRange);

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

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

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

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

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

function init() {        adsageIDB.open();      }

      window.addEventListener("DOMContentLoaded", init, false);    </script>  </head>  <body>    <ul id="todoItems"></ul>    <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />    <input type="submit" value="增加一个 IDB" οnclick="addTodo(); return false;"/>  </body></html>

see also Migrating your WebSQL DB to IndexedDB

转载于:https://www.cnblogs.com/haner/archive/2012/02/03/2337060.html

html5 初试 indexedDB相关推荐

  1. html5 indexeddb 排序,html5 – 在IndexedDB中,有没有办法进行排序复合查询？

    本回答中使用的术语"复合查询"是指在其WHERE子句中涉及多个条件的SQL SELECT语句.虽然indexedDB规范中没有提到这样的查询,但您可以通过创建一个包含一组属性名称的 ...

  2. html5indexeddb排序,html5的indexedDB数据库操作实例

    效果: 代码: StringUtil.js //去除字符串中间空格 String.prototype.Trim = function() { return this.replace(/(^s*)|(s ...

  3. HTML5的IndexedDB数据库

  4. 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(1月16日-2月5日)

    分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(1月16日-2月5日) 本周Silverlight学习资源更新 WIn2003部署Silverlight coo ...

  5. 什么是React为什么使用React什么时候使用React

    什么是React? (What is React?) React.js often referred to as React or ReactJS is a JavaScript library re ...

  6. tp5 自动加上html,【TP5.1】HTML标签自动转义，导致CKEditor保存内容无法正常显示！...

    问题:使用Thinkphp5.1 开发的时候显示CKEditor保存的内容不符合预期. 希望的样子,肯定是不显示 等标签,而是下面的样子. 因为刚开始使用TP5.1和CKEditor,所以遇到问题有点 ...

  7. 【电脑运用及修理】Mozilla Firefox 浏览器

    Firefox 浏览器 Firefox 浏览器,中文名"火狐浏览器",是来自 Mozilla 的一款免费的开源 web 浏览器. Firefox 发布于 2004 年,也是当今最流 ...

  8. HTML5本地存储IndexedDB基础使用

    做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...

  9. HTML5 进阶系列：indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

最新文章

  1. Android优化五：布局优化
  2. 关于ios phone APP生命周期的一点理解
  3. Android零基础入门第24节：自定义View简单使用
  4. delete mysql 大表_无语了，直到今天，我才揪出MySQL磁盘消耗迅猛的“真凶”！
  5. unity全栈开发是什么意思_unity游戏公司面试问题总结
  6. Python List：一文彻底粉碎列表
  7. 2016CCPC网选 1002：Zhu and 772002（求解矩阵秩）
  8. 【转】基于Ubuntu 14.04 LTS编译Android4.4.2源代码
  9. mysql如何对字段加密_MySQL对指定字段进行加密(双向加密)
  10. 扩计算机内存,如何增加计算机内存，三种方法来扩展计算机内存
  11. 使用JLINK仿真器调试树莓派4
  12. 金蝶苍穹，报表查询插件
  13. 利用马尔可夫模型分析游戏装备强化概率问题
  14. 乘法原理的例题和答案_加法原理与乘法原理练习题
  15. Android 平台最新资讯（《Google android 入门开发与实战》pdf完整下载）
  16. 微积分 | 函数连续与间断点
  17. Redis 自定义对象 cannot be cast to java.lang.String
  18. 电视缓存框架videocache
  19. 腾讯时尚网页精彩专题设计欣赏
  20. Aod-net代码相关基础学习

热门文章

  1. JavaScript Repeater 模板控件
  2. Unable to open the physical file XXX.mdf
  3. CSS完美兼容IE6/IE7/FF的通用方法
  4. 装了java_下载安装Java
  5. mysql数据库设计实践_MYSQL教程分享20个数据库设计的最佳实践
  6. java 抽象类继承抽象类_Java之继承、抽象类、接口篇
  7. leetcode算法题--重建二叉树
  8. OVS ovs-vsctl（二十五）
  9. 图解SSL/TLS协议
  10. 搞懂分布式技术16：浅谈分布式锁的几种方案