indexeddb是存储大量结构化数据的api,demo中用到的是异步api,麻烦的就是所有对indexeddb的操作都会发生一个异步的‘请求’,只要熟悉了api操作起来也很简单。
大体流程是这样
1.打开数据库
javascript code复制内容到剪贴板
- 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");
- 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"});
- }
- }
- }
这样就 创建/连接 了一个数据库
2.创建交互对象 && 监听dom事件 && 处理数据
然后就是要操作数据库了
javascript code复制内容到剪贴板
-
- 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) {
-
- };
-
- request.onerror = function(e) {
- console.log("error adding: ", e);
- };
javascript code复制内容到剪贴板
-
- 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;
-
- console.log(result.value);
- result.continue();
- };
javascript code复制内容到剪贴板
-
- ...
- store.delete('键值')
- ...
出了一个小demo
xml/html code复制内容到剪贴板
- <!doctype html>
- <html>
- <head>
- <script>
- var indexeddb = window.indexeddb || window.webkitindexeddb ||
- window.mozindexeddb;
-
- if ('webkitindexeddb' in window) {
- windowwindow.idbtransaction = window.webkitidbtransaction;
- windowwindow.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" onclick="addtodo(); return false;"/>
- </body>
- </html>
以上这篇html5 初试 indexeddb(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
原文地址:http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html
如对本文有疑问,
点击进行留言回复!!
相关文章:
-
-
-
-
-
-
H5笔记
H5笔记元素sectionnav元素section在html5中,article元素可以看成是特殊类的secti...
[阅读全文]
-
-
-
-
-
网友评论