2017-11-27 12 views
-1

웹 양식에서 indexedDB에 항목을 추가하는 간단한 JavaScript 응용 프로그램을 작성하려고합니다. 어떤 이유로 추가 요청이 성공적으로 표시되지만 데이터베이스를 새로 고침해도 Chrome 개발자 창에 아무 것도 볼 수 없습니다. 여기에 내가 쓰고있는 자바 스크립트가있다.IndexedDB add 항목이 성공적으로 표시되지만 chrome dev 도구에 표시되지 않습니다.

$(document).ready(function() { 
    $("#addcsub").click(function(e){ 
     e.preventDefault(); 
     //add the contact 
     addContact($("#clast").val(), $("#cfirst").val(), $("#cphone").val(), $("#cemail").val()); 
    }); 
}); 

document.addEventListener("DOMContentLoaded", function() { 
    if(!"indexedDB" in window){ 
     return; 
    } 
    var openRequest = indexedDB.open("theDatabase",1); 
    openRequest.onupgradeneeded = function(e) { 
     var thisDB = e.target.result; 

     if(!thisDB.objectStoreNames.contains("contacts")) { 
      var objectStore = thisDB.createObjectStore("contacts", {keyPath:"contactid",autoIncrement: true}); 
      objectStore.createIndex("contactid","contactid",{unique:true}); 
      objectStore.createIndex("lastname","lastname", {unique:false}); 
      objectStore.createIndex("firstname","firstname", {unique:false}); 
      objectStore.createIndex("phone","phone", {unique:false}); 
      objectStore.createIndex("email","email", {unique:false}); 
     } 
    } 
    openRequest.onsuccess = function(e) { 
     db = e.target.result; 
    } 
    openRequest.onerror = function(e) { 
     console.log("Open Request Error"); 
    } 
},false); 

function addContact(last,first,phone,email){ 
    var transaction = db.transaction(["contacts"],"readwrite"); 
    var store = transaction.objectStore("contacts"); 
    var tc = { 
     lastname:last, 
     firstname:first, 
     phone:phone, 
     email:email 
    } 
    var request = store.add(tc); 

    request.onerror = function(e){ 
     console.error(request.error); 
    } 
    request.onsuccess = function(e){ //this runs when I hit submit 
     console.log("Add Successful"); //this appears in the console 
    } 

} 

업데이트 : 내가 그랬어 일부 주위 파고와 내 추가 트랜잭션이 예외 : DOMException 코드의 오류와 함께 업데이트 2 (22)

중단되는 것을 깨달았 : 어떤 이유로, 그것은 다른 컴퓨터에서 작동, 그냥 내 휴대용 퍼스널 컴퓨터.

답변

1

devtools gui에 indexedDb 문제가 있습니다. 콘솔을 통해 레코드를 가져 와서 거기에 있는지 확인할 수는 있지만 과거에는 devtools를 닫은 다음 다시 열어서 새로 고쳐야했습니다.

+0

감사합니다. 콘솔을 닫았다가 반복해서 열었지만 아무 것도 바뀌지 않는 것 같습니다. 콘솔에서 레코드를 가져 오는 가장 좋은 방법은 무엇입니까, 그렇습니까? –

+0

상점에서 가져 오려면 [docs] (https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/get)를 참조하십시오. 네이티브 구문 이외의 다른 것을 사용하는 것이 좋습니다. 바위 솔리드 래퍼 인 [dexie.js] (http://dexie.org/)를 사용하는 것이 좋습니다. – Malisbad

+0

당신의 대답을 정답으로 표시하여 문제를 해결했지만 이것이 내 컴퓨터가 아닌 내 컴퓨터의 문제라고 생각합니다. –