Para agregar nuevos objetos al Object Store se realizar un request usando el método add(object) del objeto objectStore obtenido de la transacción creada. Luego, se maneja los eventos dependiendo lo que se desee realizar una vez completada la operación.
El resultado de la petición (request) es el key del objeto agregado.
// Conexion a la BD (IDBDatabase)
let db;
function createDatabase() {
//...
const request = window.indexedDB.open('MyDatabase', 1);
request.onsuccess = (e) => {
// Se crea conexion
db = request.result;
};
//...
}
function addStudent(student){
const transaction = db.transaction('students', 'readwrite');
transaction.oncomplete = function(event) {
//...
};
transaction.onerror = function(event) {
//...
};
const objectStore = transaction.objectStore('students');
// Se agrega un nuevo estudiante
const request = objectStore.add(student);
request.onsuccess = ()=> {
// request.result contiene el key del objeto agregado
console.log(`New student added, email: ${request.result}`);
}
request.onerror = (err)=> {
console.error(`Error to add new student: ${err}`)
}
}
const studentA = {
name: 'Andres',
lastname: 'Valdivia',
email: 'pandres@pandres.com',
age: 22
}
addStudent(studentA)
Una forma más abreviada y ordenada de hacer esto, tomando en cuenta que los eventos de la transacción "dependerán" de lo que pase con la petición, sería:
function addStudent(student){
const request = db.transaction('students', 'readwrite')
.objectStore('students')
.add(student);
request.onsuccess = ()=> {
console.log(`New student added, email: ${request.result}`);
}
request.onsuccess = (err)=> {
console.error(`Error to add new student: ${err}`)
}
}
const studentA = {
name: 'Andres',
lastname: 'Valdivia',
email: 'pandres@pandres.com',
age: 22
}
addStudent(studentA);
Lo anterior está bien si solo se desea agregar un estudiante cada vez que se ejecute la función, sin embargo, si se desea agregar varios estudiantes lo mejor es tener la transacción y el objectStore por separado, ya que la transacción estará activa mientras haya peticiones pendientes y el objectStore nos da acceso a la “tabla” (Object Store). Además, ahora los eventos de la transacción no "dependen" de la petición, por ejemplo, el evento complete se lanzará cuando TODOS los elementos hayan sido agregados. El código quedaría así:
function addStudents(students){
const transaction = db.transaction('students', 'readwrite');
transaction.oncomplete = function(event) {
console.log('All the students added successfully')
};
transaction.onerror = function(event) {
//...
};
const objectStore = transaction.objectStore('students');
for(student of students){
const request = objectStore.add(student);
request.onsuccess = ()=> {
console.log(`New student added, email: ${request.result}`);
}
request.onsuccess = (err)=> {
console.error(`Error to add new student: ${err}`)
}
}
}
const students = [
{name: 'name1', lastname: 'lastname1',email: 'email1@email.com', age: 22},
{name: 'name2', lastname: 'lastname2',email: 'email2@email.com', age: 24},
{name: 'name3', lastname: 'lastname3',email: 'email3@email.com', age: 22},
{name: 'name4', lastname: 'lastname4',email: 'email4@email.com', age: 23},
{name: 'name5', lastname: 'lastname5',email: 'email5@email.com', age: 22}
]
addStudents(students)
Top comments (0)