html5 初试 indexedDB(推荐)

2020-03-24 17:09:14

字体：大中小

来源：转载

供稿：网友

indexedDB是存储大量结构化数据的API，demo中用到的是异步API，麻烦的就是所有对indexedDB的操作都会发生一个异步的请求，只要熟悉了API操作起来也很简单。大体流程是这样1.打开数据库 JavaScript Code复制内容到剪贴板
varindexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB; if('webkitIndexedDB'inwindow){ window.IDBTransaction=window.webkitIDBTransaction; window.IDBKeyRange=window.webkitIDBKeyRange; } //这个就不解释了 varrequest=indexedDB.open( adsageIDB );//open：indexedDB只有这一个方法打开（数据库名） request.onsuccess=function(e){//异步 varv= 1.00 ; vardb=e.target.result; if(v!=db.version){ varsetVrequest=db.setVersion(v); setVrequest.onsuccess=function(e){//异步 if(db.objectStoreNames.contains( todo )){ db.deleteObjectStore( todo ); } varstore=db.createObjectStore( todo ,{keyPath: adsid });//onsuccess后创建ObjectStore暂时用到两个参数，数据库主键 } } }
//插入数据暂时只插入一列 vartrans=db.transaction([ todo ],IDBTransaction.READ_WRITE);//创建transaction varstore=trans.objectStore( todo );//创建Store //要操作数据必须建立transaction和Store vardata={ text :todoText, adsid :newDate().getTime() };//一个小数据adsid是主键 varrequest=store.put(data);// 强行插入 request.onsuccess=function(e){ //成功后执行一些操作 }; request.onerror=function(e){ console.log( ErrorAdding: ,e); };
//读取数据 vartrans=db.transaction([ todo ],IDBTransaction.READ_WRITE); varstore=trans.objectStore( todo ); varkeyRange=IDBKeyRange.lowerBound(0); varcursorRequest=store.openCursor(keyRange); //这里用到指针cursor,openCursor的参数keyRange是遍历范围还可以添加遍历方向参数 //另一种方法是get()这个就比较简单了直接store.get('键值')就行 cursorRequest.onsuccess=function(e){ varresult=e.target.result; if(!!result==false) return; console.log(result.html' target='_blank'>value); result.continue();//循环读取所有数据 };
script varindexedDB=window.indexedDB||window.webkitIndexedDB|| window.mozIndexedDB; if('webkitIndexedDB'inwindow){ windowwindow.IDBTransaction=window.webkitIDBTransaction; windowwindow.IDBKeyRange=window.webkitIDBKeyRange; } adsageIDB={}; adsageIDB.db=null; adsageIDB.onerror=function(e){ console.log(e); }; adsageIDB.open=function(){ varrequest=indexedDB.open( adsageIDB request.onsuccess=function(e){ varv= 1.00 ; adsageIDB.db=e.target.result; vardb=adsageIDB.db; if(v!=db.version){ varsetVrequest=db.setVersion(v); setVrequest.onerror=adsageIDB.onerror; setVrequest.onsuccess=function(e){ if(db.objectStoreNames.contains( todo )){ db.deleteObjectStore( todo } varstore=db.createObjectStore( todo , {keyPath: adsid }); adsageIDB.getAllTodoItems(); }; } else{ adsageIDB.getAllTodoItems(); } }; request.onerror=adsageIDB.onerror; } adsageIDB.addTodo=function(todoText){ vardb=adsageIDB.db; vartrans=db.transaction([ todo ],IDBTransaction.READ_WRITE); varstore=trans.objectStore( todo vardata={ text :todoText, adsid :newDate().getTime() }; varrequest=store.put(data); request.onsuccess=function(e){ adsageIDB.getAllTodoItems(); }; request.onerror=function(e){ console.log( ErrorAdding: ,e); }; }; adsageIDB.deleteTodo=function(id){ vardb=adsageIDB.db; vartrans=db.transaction([ todo ],IDBTransaction.READ_WRITE); varstore=trans.objectStore( todo varrequest=store.delete(id); request.onsuccess=function(e){ adsageIDB.getAllTodoItems(); }; request.onerror=function(e){ console.log( ErrorAdding: ,e); }; }; adsageIDB.getAllTodoItems=function(){ vartodos=document.getElementById( todoItems todos.innerHTML= ; vardb=adsageIDB.db; vartrans=db.transaction([ todo ],IDBTransaction.READ_WRITE); varstore=trans.objectStore( todo varkeyRange=IDBKeyRange.lowerBound(0); varcursorRequest=store.openCursor(keyRange); cursorRequest.onsuccess=function(e){ varresult=e.target.result; if(!!result==false) return; renderTodo(result.value); result.continue(); }; cursorRequest.onerror=adsageIDB.onerror; }; functionrenderTodo(row){ vartodos=document.getElementById( todoItems varli=document.createElement( li vara=document.createElement( a vart=document.createTextNode(row.text); a.addEventListener( click ,function(){ adsageIDB.deleteTodo(row.adsid); },false); a.textContent= [删除] ; li.appendChild(t); li.appendChild(a); todos.appendChild(li) } functionaddTodo(){ vartodo=document.getElementById( todo adsageIDB.addTodo(todo.value); todo.value= ; } functioninit(){ adsageIDB.open(); } window.addEventListener( DOMContentLoaded ,init,false); /script /head body ulid= todoItems /ul inputtype= text id= todo name= todo placeholder= adsageIDBtext? / inputtype= submit value= 增加一个IDB onclick= addTodo();returnfalse; / /body /html
以上这篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.htmlhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：使用分层画布来优化HTML5渲染的教程

下一篇：入门：HTML的基本标签和属性简单介绍