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的基本標簽和屬性簡單介紹