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

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

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