2017-05-09 4 views
0

私はIndexedDBを試し始めました。私は例をコピーして小さなHTMLページにまとめました:ボタンを押してください。レコードを追加する。トランザクションが完了したら、すべてのレコードをコンソールにダンプします。IndexedDBトランザクションは、常にChromeのadd()メソッドからonabortをスローする

IE11ではうまく動作しますが、Chromeではうまく動作しません。

request = transaction.objectstore( "store")。add({k:v})は常にrequest.onsuccess()メソッドを実行しますが、トランザクションは常にChromeによってtransaction.onabort()によって解決されます。 .put()と同じです。

これはコードです:

<!DOCTYPE html> 
<html> 
<head> 
<script> 
    //--- globals 
    var db; 

    // The initialization of our stuff in body.onload() 
    function init() { 
     var dbVersion = 1; 

     //--- Try to delete any existing database 
     var delRequest = indexedDB.deleteDatabase("notesDB"); 
     delRequest.onsuccess = function (de) { 
      dbOpen(); // .... then open a new one 
     }; 

     delRequest.onerror = function (de) { 
      dbOpen(); // ... or open a new one if one doesn't exist to delete 
     }; 

     function dbOpen() { 
      var openRequest = indexedDB.open("notesDB", dbVersion); 

      openRequest.onupgradeneeded = function (e) { 
       var ldb = e.target.result; 
       console.log("running onupgradeneeded; always start with a fresh object store"); 
       if (ldb.objectStoreNames.contains("note")) { 
        ldb.deleteObjectStore("note"); 
       } 
       if (!ldb.objectStoreNames.contains("note")) { 
        console.log("creating new note data store"); 
        var objectStore = ldb.createObjectStore("note", { autoIncrement: true }); 
        objectStore.createIndex("title", "title", { unique: false }); 
       } 
      }; 

      openRequest.onsuccess = function (e) { 
       db = e.target.result; 

       db.onerror = function (event) { 
        // Generic error handler for all errors targeted at this database 
        alert("Database error: " + event.target.errorCode); 
        console.dir(event.target); 
       }; 
       console.log("Database opened; dump existing rows (shouldn't be any)"); 
       displayNotes(); 
      }; 

      openRequest.onerror = function (e) { 
       console.log("Open error"); 
       console.log(e); 
       console.dir(e); 
      }; 
     } 

     function displayNotes() { 
      console.log("TODO - print something nice on the page"); 
      var tx = db.transaction("note", "readonly"); 
      tx.oncomplete = function (event) { console.log("read only cursor transaction complete"); } 
      tx.onerror = function (event) { console.log("readonly transaction onerror"); } 
      tx.onabort = function (event) { console.log("readonly transaction onabort"); } 

      // --- iterate cursor 
      console.log("---Start cursor dump---") 
      var ds = tx.objectStore("note"); 
      ds.openCursor().onsuccess = function (event) { 
       var cursor = event.target.result; 
       if (cursor) { 
        console.log(cursor.key); 
        console.dir(cursor.value); 
        cursor.continue(); 
       } 
       else { 
        console.log("---End cursor dump---"); 
       } 
      }; 
     } 


     document.querySelector("#test").addEventListener("click", function (clickevent) { 
      try { 
       var transaction = db.transaction("note", "readwrite"); 
       transaction.oncomplete = function (event) { 
        console.log("Cursor dump in 'add' read/write transaction oncomplete"); 
        displayNotes(); 
        console.log("add transaction oncomplete done!"); 
       }; 
       transaction.onerror = function (event) { 
        console.log("add transaction onerror"); 
       }; 
       transaction.onabort = function (event) { 
        console.log("add transaction onabort"); 
       }; 

       var objectStore = transaction.objectStore("note"); 

       var request = objectStore.add({ 
        title: "note header", 
        body: "this is random note body content " + Math.floor(Math.random() * 1000) 
       }); 

       request.onsuccess = function (event) { 
        console.log("add request onsuccess"); 
       }; 
       request.onerror = function (event) { 
        console.log("add request onerror"); 
        console.dir(event); 
       }; 
      } 
      catch (e) { 
       console.log('catchall exception'); 
       console.log(e); 
       alert("bad things done"); 
      } 

     }); 
    } 
</script> 
</head> 

<body onload="init()"> 
    <h1>IndexedDB simplest example</h1> 
    <p> 
     <button id="test">Push To Add Row To IndexedDB</button> 
    </p> 
</body> 
</html> 

答えて

1

私は、ボタンを何回の束をクリックして、それはすべての時間を働いていました。

エラーが発生しましたか?参照するにはonabortハンドラーのevent.target.errorを見てください。これはQuotaExceededErrorになる可能性があります。これは、ハードドライブの容量が非常に少ないか、ドメインのChromeに大量のデータが保存されていることを意味します。そうであれば、このケースを正常に処理する必要があるため、今すぐ実行しているのは良いことです。それ以外の場合は、ユーザーがヒットして混乱します。

+0

これをうまく処理する方法は何ですか?確かにQuotaExceededErrorです。どのようにそれを拡張しますか?私は[link] https://developer.chrome.com/apps/offline_storage#queryのメソッドを使って尋ねると0を返します。 'navigator.webkitTemporaryStorage.queryUsageAndQuota( function(usedBytes、grantedBytes){ console.log * 'PersistentStorage method'と同じです( '、usedBytes、' of '、grantedBytes、' bytes '); }、 関数(e){console.log(' Error '、e);} ) 。 –

+0

queryUsageAndQuotaから0,0を戻すことは非常に難解です。 https://crbug.com経由でChromeに対してバグを報告できますか?お使いのコンピュータで何が起こっているのか調べてみましょう。 また、ファイル(例:file:/// ...)ではなくサーバー(http:// localhost/...など)に対してテストしていますか? –

+0

IMHOクォータエラーをうまく処理するには、「データを削除しようとしたりハードドライブの空き領域を削除しようとしましたが、あなたが犯されている可能性があります」といったメッセージをユーザに表示することです。単に黙って失敗するのとは対照的です。必要のないデータを自動的に削除しようとすることもできますが、これで問題を解決することはできません。 – dumbmatter

関連する問題