Fatal编程技术网
  • android/
  • Android 科尔多瓦+；JQuery+；IndexedDB如何制作简单的.add（）。get（）？

Android 科尔多瓦+；JQuery+；IndexedDB如何制作简单的.add（）。get（）？

android jquery cordova

Android 科尔多瓦+；JQuery+；IndexedDB如何制作简单的.add（）。get（）？,android,jquery,cordova,indexeddb,Android,Jquery,Cordova,Indexeddb,我很难理解我所看到的所有例子中所有不同的语法。我甚至尝试过修改一个，但是这个例子一次做了太多事情，以至于我无法完全理解它，无法将其分解 有人可以写一个简单的复制/粘贴工作示例，说明如何创建数据库，然后使用IndexedDB与之交互吗？我想要的只是一个将值保存到db的输入/按钮，然后是第二个将值打印到屏幕上的按钮。在这里，我举了一个例子，您可以在保存时写入indexeddb的文本框中输入文本。然后，它从数据库中获取数据并将其放置在标记中 HTML: 拯救 负载 更新 JS: （函数（$、

我很难理解我所看到的所有例子中所有不同的语法。我甚至尝试过修改一个，但是这个例子一次做了太多事情，以至于我无法完全理解它，无法将其分解

有人可以写一个简单的复制/粘贴工作示例，说明如何创建数据库，然后使用IndexedDB与之交互吗？我想要的只是一个将值保存到db的输入/按钮，然后是第二个将值打印到屏幕上的按钮。

在这里，我举了一个例子，您可以在保存时写入indexeddb的文本框中输入文本。然后，它从数据库中获取数据并将其放置在标记中

HTML:


拯救


负载




更新
JS:

（函数（$、窗口、文档）{
myDb=函数（）{
var name=“test”，
version=“1”，
db，
testStoreName=“exampleStore”，
testIndexName=“testIndexName”，
addToTestIndex=false，
init=函数（）{
var deferred=$.deferred（），
openRequest=indexedDB.open（名称、版本）；
openRequest.onupgradeneeded=dbUpgrade；
openRequest.onsuccess=dbOpen；
openRequest.onerror=dbError；
延迟返回。承诺（）；
功能数据库升级（evt）{
//这里我们的数据库位于evt.target.result，这里我们可以调整存储和索引
var thisDb=evt.target.result，//我们正在使用的当前数据库
newStore=thisDb.createObjectStore（testStoreName，{keyPath:“id”，autoIncrement:true}）；
//使用索引，您可以针对特定的键，这可以是一个数组！
createIndex（“testIndexKey”，“testIndexKey”，{unique:false}）；
createIndex（“item”，“item”，{unique:false}）；
log（“正在进行升级”）；
}
函数dbOpen（evt）{
console.log（“DB已成功打开”）；
db=evt.target.result；
延迟。解决（）；
}
函数dbError（error）{
console.log（“DB错误”）；
console.log（错误）；
延迟。拒绝（错误）；
}
},
添加=功能（项目）{
var itemToAdd={“item”：item}，
奥布斯托尔，
要求
递延=$.deferred（）；
如果（！addToTestIndex）{
addToTestIndex=！addToTestIndex；
itemToAdd.testIndexKey=“这是一项测试”；
}
//首先获取具有所需访问权限的对象存储
objStore=db.transaction（[testStoreName]，“readwrite”）.objectStore（testStoreName）；
//接下来创建请求以添加它
request=objStore.add（itemToAdd）；
request.onsuccess=函数（evt）{
延迟。解决（evt.target.result）；
};
request.onerror=函数（evt）{
延迟。拒绝（evt）；
};
延迟返回。承诺（）；
},
get=函数（索引）{
//因为我们的商店使用int作为主键，这就是我们得到的
//最酷的部分是当你开始使用索引。。。
var deferred=$.deferred（），
store=db.transaction（[testStoreName]，“只读”）.objectStore（testStoreName），
request=store.get（parseInt（index））；
request.onsuccess=函数（evt）{
延迟。解决（evt.target.result）；
};
request.onerror=函数（evt）{
deferred.reject（“DBError:无法从“+testStoreName”获取“+index+”）；
};
延迟返回。承诺（）；
};
getItem=函数（itemText）{
//因为我们的商店使用int作为主键，这就是我们得到的
//最酷的部分是当你开始使用索引。。。
var deferred=$.deferred（），
store=db.transaction（[testStoreName]，“只读”）.objectStore（testStoreName），
testIndex=存储索引（“项”），
request=testIndex.getKey（itemText）；
request.onsuccess=函数（evt）{
延迟。解决（evt.target.result）；
};
request.onerror=函数（evt）{
deferred.reject（“DBError:无法从“+testStoreName”获取“+index+”）；
};
延迟返回。承诺（）；
};
put=功能（项目）{
var deferred=$.deferred（），
store=db.transaction（[testStoreName]，“readwrite”）.objectStore（testStoreName），
请求=存储。放置（项目）；
request.onsuccess=函数（evt）{
延迟。解决（evt.target.result）；
};
request.onerror=函数（evt）{
deferred.reject（“DBError:无法从“+testStoreName”获取“+index+”）；
};
延迟返回。承诺（）；
}
indexedDB.deleteDatabase（'test'）；
返回{
init:init，
得到：得到，
getItem:getItem，
加:加,，
推杆：推杆
};
}
var db=new myDb（），
项目更新；
db.init（）.then（函数（）{
$（“#单击我”）。单击（函数（evt）{
console.log（“向数据库添加新项”）；
db.add（$（“#datagoesher”）.val（））
.然后（功能（res）{
返回db.get（res）；
})
.然后（功能（res）{
$（“#已保存”）.append（“”+res.item+”
”）；
});
});
$（“#加载我”）。单击（函数（evt）{
db.getItem（$（“#加载数据”）.val（））
.然后（功能（res）{
log（“有我们的索引：”）；
控制台日志（res）；
返回db.get（res）；
})
.然后（功能（res）{
log（“获取以填充更新输入：”）
控制台日志（res）；
itemToUpdate=res；
$（'#updateData'）.val（itemToUpdate.item）；
});
});
$（“#updateme”）。单击（函数（evt）{
itemToUpdate.item=$（'#updateData'）.val（）；
db.put（项目更新）
.然后（功能（res）{
console.log（“应更新项目”）；
控制台日志（res）；
})
});
})
})（jQuery、窗口、文档）；
您可以玩的Plunker：

你真的需要处理回调，这是个棘手的问题 
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <input type="text" id="dataGoesHere" placeholder="item to be saved"/> 
    <button id="clickme">Save</button>
    <div id="saved"></div>
    </br>
    <input type="text" id="loadData" placeholder="type item here" /> 
    <button id="loadme">Load</button>
    </br>
    </br>
    <input type="text" id="updateData" placeholder="loaded item to update" /> 
    <button id="updateme">Update</button>
  </body>

</html>

(function ($, window, document) {

  myDb = function () {
    var name = "test",
    version = "1",
    db,
    testStoreName = "exampleStore",
    testIndexName = "testIndexName",
    addToTestIndex = false,

    init = function () {
      var deferred = $.Deferred(),
      openRequest = indexedDB.open(name, version);

      openRequest.onupgradeneeded = dbUpgrade;
      openRequest.onsuccess = dbOpen;
      openRequest.onerror = dbError;

      return deferred.promise();

      function dbUpgrade(evt) {
        //here our db is at evt.target.result here we can adjust stores and indexes
        var thisDb = evt.target.result, //the current db we are working with
        newStore = thisDb.createObjectStore(testStoreName, {keyPath: "id", autoIncrement: true});
        //Using indexes, you can target specific keys, this can be an array!
        newStore.createIndex("testIndexKey", "testIndexKey", {unique : false});
        newStore.createIndex("item", "item", {unique : false});
        console.log("Doing an upgrade");
      }

      function dbOpen(evt) {
        console.log("DB successfully opened");
        db = evt.target.result;
        deferred.resolve();
      }

      function dbError(error) {
        console.log("DB Error");
        console.log(error);
        deferred.reject(error);
      }
    },

    add = function(item) {
      var itemToAdd = {"item" : item},
      objStore,
      request,
      deferred = $.Deferred();
      if (!addToTestIndex) {
        addToTestIndex = !addToTestIndex;
        itemToAdd.testIndexKey = "This is a test";
      }

      //first get the object store with the desired access
      objStore = db.transaction([testStoreName], "readwrite").objectStore(testStoreName);
      //next create the request to add it
      request = objStore.add(itemToAdd);
        request.onsuccess = function (evt) {
            deferred.resolve(evt.target.result);
        };

          request.onerror = function (evt) {
            deferred.reject(evt);
        };

      return deferred.promise();
    },

    get = function (index) {
      //Since our store uses an int as a primary key, that is what we are getting
      //The cool part is when you start using indexes...
      var deferred = $.Deferred(),
      store = db.transaction([testStoreName], "readonly").objectStore(testStoreName),
      request = store.get(parseInt(index));

      request.onsuccess = function (evt) {
        deferred.resolve(evt.target.result);
      };

      request.onerror = function (evt) {
        deferred.reject("DBError: could not get " + index + " from " + testStoreName);
      };

      return deferred.promise();
      };

    getItem = function (itemText) {
      //Since our store uses an int as a primary key, that is what we are getting
      //The cool part is when you start using indexes...
      var deferred = $.Deferred(),
      store = db.transaction([testStoreName], "readonly").objectStore(testStoreName),
      testIndex = store.index("item"),
      request = testIndex.getKey(itemText);

      request.onsuccess = function (evt) {
        deferred.resolve(evt.target.result);
      };

      request.onerror = function (evt) {
        deferred.reject("DBError: could not get " + index + " from " + testStoreName);
      };

      return deferred.promise();
      };

      put = function (item) {
      var deferred = $.Deferred(),
      store = db.transaction([testStoreName], "readwrite").objectStore(testStoreName),
      request = store.put(item);

      request.onsuccess = function (evt) {
        deferred.resolve(evt.target.result);
      };

      request.onerror = function (evt) {
        deferred.reject("DBError: could not get " + index + " from " + testStoreName);
      };

      return deferred.promise();
      }

      indexedDB.deleteDatabase('test');

    return {
      init: init,
      get: get,
      getItem: getItem,
      add: add,
      put: put
    };
  }

  var db = new myDb(),
  itemToUpdate;
  db.init().then(function () {
    $("#clickme").click(function(evt) {
      console.log("Adding new item to db");
      db.add($("#dataGoesHere").val())
      .then(function (res) {
        return db.get(res);
      })
      .then(function (res) {
        $('#saved').append('<p>'+res.item+'</p>');
      });
    });

    $("#loadme").click(function(evt) {
      db.getItem($("#loadData").val())
      .then(function (res) {
        console.log("Have our index:");
        console.log(res);
        return db.get(res);
      })
      .then(function (res) {
        console.log("Fetched to populate update input:")
        console.log(res);
        itemToUpdate = res;
        $('#updateData').val(itemToUpdate.item);
      });
    });

    $("#updateme").click(function(evt) {
      itemToUpdate.item = $('#updateData').val();
      db.put(itemToUpdate)
      .then(function(res) {
        console.log("Item should be updated");
        console.log(res);
      })
    });
  })



})(jQuery, window, document);