Cordova + JQuery + IndexedDB, как сделать простой.add() & .get()?
Я с трудом справляюсь со всеми синтаксисами из всех примеров, которые я видел. Я даже пытался изменить рабочий пример, но этот пример делает так много вещей одновременно, что я не понимаю всего этого, чтобы иметь возможность разбить его.
Может кто-нибудь, пожалуйста, напишите простой рабочий пример копирования / вставки того, как вы создаете БД, а затем взаимодействуете с ним с помощью IndexedDB? Все, что мне нужно, это кнопка ввода / ввода, которая сохранит значение в БД, а затем вторая кнопка, которая выведет значение на экран.
1 ответ
Здесь я сделал пример, где вы вводите текст в текстовое поле, которое записывается в indexeddb при сохранении. Затем он получает эти данные из базы данных и помещает их в
тег.
HTML:
<!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>
JS:
(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);
Плункер, с которым можно играть: http://plnkr.co/edit/Zxh7KYGylyZNYGTVKsQl?p=preview
Вы действительно должны иметь дело с обратными вызовами, это сложная часть. Я также пытаюсь наметить индексы. Вы можете использовать их, чтобы быстро выполнить сокращение вашего набора данных, и вы можете открыть курсор или получить его напрямую.
РЕДАКТИРОВАТЬ: Хорошо, там скопировано много кода пасты, но я обновил пример. Начните с сохранения значения. Введите элемент для загрузки, который заполнит ввод для обновления. Измените этот вход, чтобы обновить значение.
Опять же, сложная часть заключается в том, что она асинхронна, а что-то вроде localStorage - нет. Используя обещания, вы можете легко имитировать поведение чего-то вроде localStorage (как вы указали в ветке комментариев), но indexeddb также предлагает сокращения по вашему набору данных (среди многих других функций).