html5 初试 indexedDB(推荐) -H5教程-PHP中文网

首页

web前端

H5教程

html5 初试 indexedDB(推荐)

黄舟

Feb 20, 2017 pm 01:24 PM

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

大体流程是这样

1.打开数据库

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   

      

    if (&#39;webkitIndexedDB&#39; 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.创建交互对象 && 监听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(&#39;键值&#39;)就行   

      

    cursorRequest.onsuccess = function(e) {   

        var result = e.target.result;   

        if(!!result == false)   

        return;   

      

        console.log(result.value);   

        result.continue(); //循环读取所有数据   

    };

//删除数据   

    ...   

    store.delete(&#39;键值&#39;)   

    ...

出了一个小demo

<!DOCTYPE html>  

    <html>  

      <head>  

        <script>  

          var indexedDB = window.indexedDB || window.webkitIndexedDB ||   

                          window.mozIndexedDB;   

             

          if (&#39;webkitIndexedDB&#39; 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(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML5的遗产：当前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代码：可访问性和语义HTMLApr 09, 2025 am 12:05 AM

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构，提高SEO。2.ARIA属性如aria-label增强可访问性，辅助技术用户可顺利使用网页。

H5与HTML5相同吗？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多数情况下是相同的，但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准，包含新标签和API。2."h5"通常是HTML5的简称，但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5的功能是什么？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五个版本，它为开发者提供了更强大的工具集，使得创建复杂的网页应用变得更加简单。H5的核心功能包括：1）元素允许在网页上绘制图形和动画；2）语义化标签如、等，使网页结构清晰，利于SEO优化；3）新API如GeolocationAPI，支持基于位置的服务；4）跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

h5链接怎么做Apr 06, 2025 pm 12:39 PM

如何创建 H5 链接？确定链接目标：获取 H5 页面或应用程序的 URL。创建 HTML 锚点：使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性（可选）：根据需要设置 target、title 和 onclick 属性。添加到网页：将 HTML 锚点代码添加到希望链接出现的网页中。

h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

解决 H5 兼容问题的方法包括：使用响应式设计，允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具，在发布前测试兼容性。使用 Polyfill，为旧浏览器提供对新 API 的支持。遵循 Web 标准，使用有效的代码和最佳实践。使用 CSS 预处理器，简化 CSS 代码并提高可读性。优化图像，减小网页大小并加快加载速度。启用 HTTPS，确保网站的安全性。