html5怎样操作indexedDB_html5

html5

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: H5中视频与音频标签和进度条如何... 下一篇:H5与C3的新交互特性有哪些

html5怎样操作indexedDB

发布时间：2022-05-17 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了html5怎样操作indexedDB，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

这次给大家带来htML5怎样操作indexedDB，html5操作indexedDB的注意事项有哪些，下面就是实战案例，一起来看一下。

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

大体流程是这样

1.打开数据库

VAR indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   
  
if (&#39;webkITIndexedDB' in window) {   
    window.IDBTransaction = window.webkitIDBTransaction;   
    window.IDBKeyRange = window.webkitIDBKeyRange;   
}   
//这个就不解释了   
  
var request = indexedDB.oPEn("adsageiDB");  //open  ： indexedDB只有这一个方法  打开（数据库名）   
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"});//onsuccess 后创建ObjectStore  暂时用到两个参数，数据库&&主键   
        }   
    }       
}

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

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

然后就是要操作数据库了

//插入数据 暂时只插入一列    
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction    
var store = trans.objectStore("todo");//创建Store   
//要操作数据必须建立transaction 和 Store   
  
var data = {   
    "text": todoText,   
    "adsid": new Date().getTime()   
};//一个小数据 adsid是主键   
  
var request = store.put(data); //‘强行’插入   
  
request.onsuccess = function(e) {   
    //成功后执行一些操作   
};   
  
request.onerror = function(e) {   
    console.LOG("Error Adding: ", e);   
};  
//读取数据   
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
var store = trans.objectStore("todo");   
  
var keyRange = IDBKeyRange.lowerBound(0);   
var cursorRequest = store.openCursor(keyRange);   
//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数   
//另一种方法是get() 这个就比较简单了直接store.get('键值')就行   
  
cursorRequest.onsuccess = function(e) {   
    var result = e.target.result;   
    if(!!result == false)   
    return;   
  
    console.log(result.value);   
    result.continue(); //循环读取所有数据   
};  
//删除数据   
...   
store.delete('键值')   
...  
<!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全部内容，希望文章能够帮你解决html5怎样操作indexedDB所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：html5 html5

上一篇: H5中视频与音频标签和进度条如何... 下一篇:H5与C3的新交互特性有哪些

猜你在找的html5相关文章

关于移动端h5开发相关内容总结 2022-05-17
html5教程-学表单的第二天 2018-12-10
html5教程-HTML5浏览器支持 2018-12-10
html5教程-HTML5智能表单 2018-12-10
html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
html5教程-html5shiv.js和respond.min.js 2018-12-10
html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
html5教程-使用Html5实现手风琴案例 2018-12-10
html5教程-html5笔记 2018-12-10

全站导航更多

最新html5教程

热门html5教程