在 indexeddbshim 中出现错误：DOM 异常 11：尝试使用不可用或不再可用的对象

Question

我正在为 iOS 7.1 使用 IndexedDBShim polyfill（所以底层是 WebSQL），当我尝试运行它时，我得到：

"InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable."

代码：

//Create and open the database
var request = indexedDB.open( "Videos", 1.1 );
var database;

request.onerror = function (event)
{
    console.log( "Unable to create storage for offline videos, an error occurred." );
    console.dir( event );
};

//On success we'll grab the database and store or load the videos
request.onsuccess = function (event)
{
    //Grab the database
    database = request.result;

    //Handle database error
    database.onerror = function (event)
    {
        console.log( "Unable to access storage, an error occurred." );
        console.dir( event );
    };

    downloadVideo();
}

//Create the database and object store
request.onupgradeneeded = function (event)
{
    //Create the video object store (event.target.result is the database)
    event.target.result.createObjectStore( "Videos" );
};

function downloadVideo()
{
    var blob;

    //Start the request
    var videoRequest = new XMLHttpRequest();

    //Get the Video file from the server.
    videoRequest.open( "GET", "videos/test.mp4", true );

    //It's a blob (for storing in database)
    videoRequest.responseType = "blob";

    //Listen for when it's done downloading the video data
    videoRequest.addEventListener(
        "load",
        function ()
        {
            //We got it
            if ( videoRequest.status === 200 )
            {
                //Get the data
                blob = videoRequest.response;

                //Start transaction for videos object store
                var transaction = database.transaction( [ "Videos" ], "readwrite" );

                //Store the video file
                var putRequest = transaction.objectStore( "Videos" ).put( blob, "savedVideo" );

                putRequest.onsuccess = function(e)
                {
                    console.log( "succes!" );
                    console.dir(e);
                }
            }

            //An error occurred
            else console.log( null, "Unable to save, as an error occurred." );
        },
        false
    );

    //Start the request
    videoRequest.send();
}

Answer 1

我的第一个猜测是您遇到此错误是因为您使用 database 变量的方式。尝试从加载回调的主体中设置和打开连接，然后在连接打开回调的主体中执行与数据库相关的工作。

类似于以下缩写代码：

function downloadVideo(path) {
  console.log('Requesting video blob at %s', path);
  var vr = new XMLHttpRequest();
  vr.onload = onVideoDownload.bind(vr);
  vr.responseType = 'blob';
  vr.open('GET', path);
  vr.send();
}

function onVideoDownload(request) {
  console.log('Downloaded video blob, connecting to indexedDB');
  var video = request.response;
  var openRequest = indexedDB.open('Videos', 1);
  openRequest.onupgradeneeded = onUpgradeNeeded;
  openRequest.onsuccess = storeVideo.bind(openRequest, video);
}

function onUpgradeNeeded(event) {
  var database = event.target;
  database.createObjectStore('Videos');
}

function storeVideo(video, event) {
  console.log('Connected to indexedDB, storing a video');
  var database = event.target.result;
  var tx = database.transaction('Videos','readwrite');
  var videoStore = tx.objectStore('Videos');
  var putRequest = videoStore.put('blob', video);
  putRequest.onsuccess = onStoreVideo.bind(putRequest, video);
}

function onStoreVideo(video, event) {
  console.log('Successfully stored a video!');
}

downloadVideo('videos/test.mp4');

Answer 2

我试图将一个 blob 插入到数据库中，而没有先用 base64 对其进行编码。就像在 iOS safari 7.1 上一样，支持数据库是 WebSQL，它不接受二进制数据。