G43riko
10/24/2017 - 2:19 PM
IndexDB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}
function testDatabase() {
const databaseName = "MyTestDatabase";
function handleError(error) {
console.error("error: ", error);
}
const request = window.indexedDB.open(databaseName, 3);
request.onerror = handleError;
request.onupgradeneeded = function(event) {
var db = event.target.result;
createDb(db);
// useDb(db)
};
/*
request.onsuccess = function(event) {
var db = event.target.result;
useDb(db);
}
*/
function createRealDB(db) {
const branches = [
{ id: 1, name: "Bill", age: 35, email: "bill@company.com" },
{ id: 2, name: "Donna", age: 32, email: "donna@home.org" }
];
const branchObjectStore = db.createObjectStore("branches", { keyPath: "id" });
branchObjectStore.transaction.oncomplete = function (event) {
// Store values in the newly created objectStore.
const branchObjectStore = db.transaction("branches", "readwrite").objectStore("branches");
for (let i in branches) {
branchObjectStore.add(branches[i]);
}
};
const users = [
{ id: 1, name: "Bill", age: 35, email: "bill@company.com" },
{ id: 2, name: "Donna", age: 32, email: "donna@home.org" }
];
const userObjectStore = db.createObjectStore("users", { keyPath: "id" });
userObjectStore.transaction.oncomplete = function (event) {
// Store values in the newly created objectStore.
const userObjectStore = db.transaction("users", "readwrite").objectStore("users");
for (let i in users) {
userObjectStore.add(users[i]);
}
};
}
function createDb(db) {
createRealDB(db);
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
// Create an objectStore for this database
const objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
const indexName = objectStore.index("name");
const indexEmail = objectStore.index("email");
objectStore.transaction.oncomplete = function (event) {
// Store values in the newly created objectStore.
const customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
for (let i in customerData) {
customerObjectStore.add(customerData[i]);
}
};
}
function useDb(db) {
function getData(db) {
const transaction = db.transaction(["customers"]);
const objectStore = transaction.objectStore("customers");
const request = objectStore.get("444-44-4444");
request.onerror = handleError;
request.onsuccess = function (event) {
console.log("Name for SSN 444-44-4444 is " + request.result.name);
};
}
getData(db);
}
}
// testDatabase();
class DbHandler {
constructor(title) {
this._checkBrowser();
this._title = title;
this._errorHandler = (error) => console.log(error);
}
_checkBrowser() {
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}
}
connect(keys) {
const request = window.indexedDB.open(databaseName, 3);
request.onsuccess = function(e) {
console.log("Pripojenie k databaze bolo úspešné");
this._db = e.target.result;
getUsers(25, db);
}
request.onerror = this._errorHandler;
request.onupgradeneeded = function(e) {
this._db = e.target.result;
if (Array.isArray(keys)) {
keys.forEach((key) => {
if (!db.objectStoreNames.contains(key)) {
const title = key.title || key;
const params = key.params || {keyPath: "id", autoIncrement: true};
const os = db.createObjectStore(title, params);
}
})
}
}
}
getItem(table, id) {
return new Promise((success, reject) => {
const transaction = this._db.transaction([table], "readonly");
const store = transaction.objectStore(table);
const request = store.get(id);
request.onerror = (error) => reject(error);
request.onsuccess = function (event) {
success(request.result)
};
})
}
getAllItem(table) {
return new Promise((success, reject) => {
const transaction = this._db.transaction([table], "readonly");
const store = transaction.objectStore(table);
const request = store.getAll();
request.onerror = (error) => reject(error);
request.onsuccess = function (event) {
success(request.result)
};
})
}
addItem(table, item) {
return new Promise((success, reject) => {
const transaction = db.transaction([table], "readwrite");
const store = transaction.objectStore(table);
const request = store.add(item);
request.onsuccess = () => success(item);
request.onerror = (error) => reject(error);
});
}
}
function testDB(databaseName = "MyTestDatabase") {
const handleError = (error) => console.error("error: ", error);
const request = window.indexedDB.open(databaseName, 3);
request.onsuccess = function(e) {
console.log("Pripojenie k databaze bolo úspešné");
const db = e.target.result;
// addUser({meno: "gabo", id: 25, vek: 25}, db);
getUsers(25, db);
}
request.onerror = handleError;
request.onupgradeneeded = function(e) {
const db = e.target.result;
console.log("db: ", db);
if (!db.objectStoreNames.contains("users")) {
const os = db.createObjectStore("users", {keyPath: "id", autoIncrement: true});
}
}
function addUser(user, db) {
const transaction = db.transaction(["users"], "readwrite");
const store = transaction.objectStore("users");
const request = store.add(user);
request.onsuccess = () => console.log("user uspešne vložený");
request.onerror = (error) => console.log("používatela sa nepodarilo vložiť");
}
function getUsers(id, db) {
const transaction = db.transaction(["users"], "readonly");
const store = transaction.objectStore("users");
const request = store.getAll();
request.onerror = handleError;
request.onsuccess = function (event) {
console.log("Name for SSN 444-44-4444 is ", request.result);
};
/*
const index = store.index("id");
index.openCursor().onSuccess = function(e) {
const cursor = e.target.result;
if (cursor) {
console.log("user: ", cursor.value.id);
cursor.continue();
}
}
*/
}
}
testDB();
</script>
</body>
</html>// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}
function testDatabase() {
const databaseName = "MyTestDatabase";
function handleError(error) {
console.error("error: ", error);
}
const request = window.indexedDB.open(databaseName, 3);
request.onerror = handleError;
request.onupgradeneeded = function(event) {
var db = event.target.result;
createDb(db);
useDb(db)
};
request.onsuccess = function(event) {
var db = event.target.result;
useDb(db);
}
function createDb(db) {
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
// Create an objectStore for this database
const objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: true });
const indexName = objectStore.index("name");
const indexEmail = objectStore.index("email");
objectStore.transaction.oncomplete = function (event) {
// Store values in the newly created objectStore.
const customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
for (let i in customerData) {
customerObjectStore.add(customerData[i]);
}
};
}
function useDb(db) {
function getData(db) {
const transaction = db.transaction(["customers"]);
const objectStore = transaction.objectStore("customers");
const request = objectStore.get("444-44-4444");
request.onerror = handleError;
request.onsuccess = function (event) {
console.log("Name for SSN 444-44-4444 is " + request.result.name);
};
}
getData(db);
}
}
testDatabase();