• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5 初试 indexedDB(推荐)

    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 & CSS3的新交互特性
    下一篇：浅谈Html5中视频 音频标签 进度条的问题
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5 初试 indexedDB(推荐) html5,初试,indexedDB,推荐,