欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html5 初试 indexedDB(推荐)

程序员文章站 2023-11-26 17:09:40
下面小编就为大家带来一篇html5 初试 indexedDB(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦... 16-07-21...

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

大体流程是这样

1.打开数据库

javascript code复制内容到剪贴板
  1. var indexeddb = window.indexeddb || window.webkitindexeddb || window.mozindexeddb;   
  2.   
  3. if ('webkitindexeddb' in window) {   
  4.     window.idbtransaction = window.webkitidbtransaction;   
  5.     window.idbkeyrange = window.webkitidbkeyrange;   
  6. }   
  7. //这个就不解释了   
  8.   
  9. var request = indexeddb.open("adsageidb");  //open  ： indexeddb只有这一个方法  打开（数据库名）   
  10. request.onsuccess = function(e) { //异步   
  11.     var v = "1.00";   
  12.     var db = e.target.result;   
  13.   
  14.     if (v!= db.version) {   
  15.         var setvrequest = db.setversion(v);   
  16.         setvrequest.onsuccess = function(e) { //异步   
  17.             if(db.objectstorenames.contains("todo")) {   
  18.                 db.deleteobjectstore("todo");   
  19.             }   
  20.             var store = db.createobjectstore("todo", {keypath: "adsid"});//onsuccess 后创建objectstore  暂时用到两个参数，数据库&&主键   
  21.         }   
  22.     }       
  23. }  

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

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

然后就是要操作数据库了

javascript code复制内容到剪贴板
  1. //插入数据 暂时只插入一列    
  2. var trans = db.transaction(["todo"], idbtransaction.read_write);//创建transaction    
  3. var store = trans.objectstore("todo");//创建store   
  4. //要操作数据必须建立transaction 和 store   
  5.   
  6. var data = {   
  7.     "text": todotext,   
  8.     "adsid": new date().gettime()   
  9. };//一个小数据 adsid是主键   
  10.   
  11. var request = store.put(data); //‘强行’插入   
  12.   
  13. request.onsuccess = function(e) {   
  14.     //成功后执行一些操作   
  15. };   
  16.   
  17. request.onerror = function(e) {   
  18.     console.log("error adding: ", e);   
  19. };  
javascript code复制内容到剪贴板
  1. //读取数据   
  2. var trans = db.transaction(["todo"], idbtransaction.read_write);   
  3. var store = trans.objectstore("todo");   
  4.   
  5. var keyrange = idbkeyrange.lowerbound(0);   
  6. var cursorrequest = store.opencursor(keyrange);   
  7. //这里用到指针cursor ,opencursor的参数 keyrange是遍历范围 还可以添加遍历方向参数   
  8. //另一种方法是get() 这个就比较简单了直接store.get('键值')就行   
  9.   
  10. cursorrequest.onsuccess = function(e) {   
  11.     var result = e.target.result;   
  12.     if(!!result == false)   
  13.     return;   
  14.   
  15.     console.log(result.value);   
  16.     result.continue(); //循环读取所有数据   
  17. };  
javascript code复制内容到剪贴板
  1. //删除数据   
  2. ...   
  3. store.delete('键值')   
  4. ...  

出了一个小demo

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3.   <head>  
  4.     <script>  
  5.       var indexeddb = window.indexeddb || window.webkitindexeddb ||   
  6.                       window.mozindexeddb;   
  7.          
  8.       if ('webkitindexeddb' in window) {   
  9.         windowwindow.idbtransaction = window.webkitidbtransaction;   
  10.         windowwindow.idbkeyrange = window.webkitidbkeyrange;   
  11.       }   
  12.          
  13.       adsageidb = {};   
  14.       adsageidb.db = null;   
  15.          
  16.       adsageidb.onerror = function(e) {   
  17.         console.log(e);   
  18.       };   
  19.          
  20.       adsageidb.open = function() {   
  21.         var request = indexeddb.open("adsageidb");   
  22.          
  23.         request.onsuccess = function(e) {   
  24.           var v = "1.00";   
  25.           adsageidb.db = e.target.result;   
  26.           var db = adsageidb.db;   
  27.   
  28.           if (v!= db.version) {   
  29.             var setvrequest = db.setversion(v);   
  30.          
  31.             setvrequest.onerror = adsageidb.onerror;   
  32.             setvrequest.onsuccess = function(e) {   
  33.               if(db.objectstorenames.contains("todo")) {   
  34.                 db.deleteobjectstore("todo");   
  35.               }   
  36.          
  37.               var store = db.createobjectstore("todo",   
  38.                 {keypath: "adsid"});   
  39.          
  40.               adsageidb.getalltodoitems();   
  41.             };   
  42.           }   
  43.           else {   
  44.             adsageidb.getalltodoitems();   
  45.           }   
  46.         };   
  47.          
  48.         request.onerror = adsageidb.onerror;   
  49.       }   
  50.          
  51.       adsageidb.addtodo = function(todotext) {   
  52.         var db = adsageidb.db;   
  53.         var trans = db.transaction(["todo"], idbtransaction.read_write);   
  54.         var store = trans.objectstore("todo");   
  55.          
  56.         var data = {   
  57.           "text": todotext,   
  58.           "adsid": new date().gettime()   
  59.         };   
  60.          
  61.         var request = store.put(data);   
  62.          
  63.         request.onsuccess = function(e) {   
  64.           adsageidb.getalltodoitems();   
  65.         };   
  66.          
  67.         request.onerror = function(e) {   
  68.           console.log("error adding: ", e);   
  69.         };   
  70.       };   
  71.          
  72.       adsageidb.deletetodo = function(id) {   
  73.         var db = adsageidb.db;   
  74.         var trans = db.transaction(["todo"], idbtransaction.read_write);   
  75.         var store = trans.objectstore("todo");   
  76.          
  77.         var request = store.delete(id);   
  78.          
  79.         request.onsuccess = function(e) {   
  80.           adsageidb.getalltodoitems();   
  81.         };   
  82.          
  83.         request.onerror = function(e) {   
  84.           console.log("error adding: ", e);   
  85.         };   
  86.       };   
  87.          
  88.       adsageidb.getalltodoitems = function() {   
  89.         var todos = document.getelementbyid("todoitems");   
  90.         todos.innerhtml = "";   
  91.          
  92.         var db = adsageidb.db;   
  93.         var trans = db.transaction(["todo"], idbtransaction.read_write);   
  94.         var store = trans.objectstore("todo");   
  95.          
  96.         var keyrange = idbkeyrange.lowerbound(0);   
  97.         var cursorrequest = store.opencursor(keyrange);   
  98.          
  99.         cursorrequest.onsuccess = function(e) {   
  100.           var result = e.target.result;   
  101.           if(!!result == false)   
  102.             return;   
  103.          
  104.           rendertodo(result.value);   
  105.           result.continue();   
  106.         };   
  107.          
  108.         cursorrequest.onerror = adsageidb.onerror;   
  109.       };   
  110.          
  111.       function rendertodo(row) {   
  112.         var todos = document.getelementbyid("todoitems");   
  113.         var li = document.createelement("li");   
  114.         var a = document.createelement("a");   
  115.         var t = document.createtextnode(row.text);   
  116.          
  117.         a.addeventlistener("click", function() {   
  118.           adsageidb.deletetodo(row.adsid);   
  119.         }, false);   
  120.          
  121.         a.textcontent = " [删除]";   
  122.         li.appendchild(t);   
  123.         li.appendchild(a);   
  124.         todos.appendchild(li)   
  125.       }   
  126.          
  127.       function addtodo() {   
  128.         var todo = document.getelementbyid("todo");   
  129.         adsageidb.addtodo(todo.value);   
  130.         todo.value = "";   
  131.       }   
  132.          
  133.       function init() {   
  134.         adsageidb.open();   
  135.       }   
  136.          
  137.       window.addeventlistener("domcontentloaded", init, false);   
  138.     </script>  
  139.   </head>  
  140.   <body>  
  141.     <ul id="todoitems"></ul>  
  142.     <input type="text" id="todo" name="todo" placeholder="adsageidb text?" />  
  143.     <input type="submit" value="增加一个 idb" onclick="addtodo(); return false;"/>  
  144.   </body>  
  145. </html>  

以上这篇html5 初试 indexeddb(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/21/5690444.html

上一篇： 基于HTML5 的人脸识别活体认证的实现方法

下一篇： CorelDRAW基础教程：CorelDRAW中的颜色模式含义图文介绍

推荐阅读