html5 먼저 indexedDB를 사용해 보세요(권장)-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5 먼저 indexedDB를 사용해 보세요(권장)

黄舟

Feb 20, 2017 pm 01:24 PM

indexedDB는 대량의 구조화된 데이터를 저장하는 API입니다. 데모에서는 비동기 API가 사용됩니다. 문제는 API에 익숙하다면 indexedDB의 모든 작업이 비동기 '요청'으로 이어진다는 것입니다. , 작동이 매우 간단합니다.

일반적인 과정은 이렇습니다

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;)   

    ...

작은 데모

<!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 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5 코드 : 접근성 및 시맨틱 HTMLApr 09, 2025 am 12:05 AM

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

H5는 html5와 동일합니까?Apr 08, 2025 am 12:16 AM

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5의 기능은 무엇입니까?Apr 07, 2025 am 12:10 AM

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

H5 링크를 수행하는 방법Apr 06, 2025 pm 12:39 PM

H5 링크를 만드는 방법? 링크 대상 결정 : H5 페이지 또는 응용 프로그램의 URL을 가져옵니다. HTML 앵커 작성 : & lt; a & gt; 태그 앵커를 만들고 링크 대상 URL을 지정합니다. 링크 속성 설정 (선택 사항) : 필요에 따라 대상, 제목 및 on 클릭 속성을 설정하십시오. 웹 페이지에 추가 : 링크가 나타나려는 웹 페이지에 HTML 앵커 코드를 추가하십시오.

See all articles