(que se encuentra en el siguiente sitio web https://javascript.info/indexeddb#object-store ) Esta función de JavaScript usa indexeddb para agregar un libro, con datos, a una lista. Las funciones permiten al usuario eliminar también todos los datos de la lista, así como mostrar los datos.
<!doctype html> <script src="https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js"></script> <button onclick="addBook()">Add a book</button> <button onclick="clearBooks()">Clear books</button> <p>Books list:</p> <ul id="listElem"></ul> <script> let db; init(); async function init() { db = await idb.openDb('booksDb', 1, db => { db.createObjectStore('books', {keyPath: 'name'}); }); list(); } async function list() { let tx = db.transaction('books'); let bookStore = tx.objectStore('books'); let books = await bookStore.getAll(); if (books.length) { listElem.innerHTML = books.map(book => `<li> name: ${book.name}, price: ${book.price} </li>`).join(''); } else { listElem.innerHTML = '<li>No books yet. Please add books.</li>' } } async function clearBooks() { let tx = db.transaction('books', 'readwrite'); await tx.objectStore('books').clear(); await list(); } async function addBook() { let name = prompt("Book name?"); let price = +prompt("Book price?"); let tx = db.transaction('books', 'readwrite'); try { await tx.objectStore('books').add({name, price}); await list(); } catch(err) { if (err.name == 'ConstraintError') { alert("Such book exists already"); await addBook(); } else { throw err; } } } window.addEventListener('unhandledrejection', event => { alert("Error: " + event.reason.message); }); </script>A partir de este script, ¿cómo podría modificarlo para que solo elimine el último elemento agregado a la lista? Ejemplo si la lista fuera
name: Star wars, price: 20 name: LOTR, price: 30 name: Harry Potter, price: 15¿Se eliminaría la última entrada, Harry Potter?
Este fue mi intento de usar removeChild() , sin embargo, esta implementación elimina todos los datos
$('#lastUser').on('click', function() { var user = $('#search').val(); async function clearlastUser() { let tx = db.transaction('books', 'readwrite'); await tx.objectStore('books').parentNode.removeChild(user); await list(); } });En la página de la biblioteca idb aquí , se muestra un ejemplo del método de eliminación. Usando esto para armar algo, haría algo como esto:
let db; let idx;// declare variable for index of books init(); async function init() { db = await idb.openDb("booksDb", 1, (db) => { db.createObjectStore("books", { keyPath: "name" }); }); list(); idx = []; //define array to store keys } async function clearBooks() { let tx = db.transaction("books", "readwrite"); await tx.objectStore("books").clear(); await list(); idx = []; //clear index } async function deleteBook(key) { key = idx[idx.length - 1]; //last key added to index let tx = db.transaction("books", "readwrite"); await tx.objectStore("books").delete(key); await list(); } async function addBook() { let name = prompt("Book name?"); let price = +prompt("Book price?"); let tx = db.transaction("books", "readwrite"); await tx.objectStore("books").add({ name, price }); await list(); idx.push(name);//add key to index }Echando un vistazo a esta publicación aquí , parece que obtener el último elemento de un objeto JavaScript no siempre es preciso y las matrices son una mejor solución. Sin embargo, es posible que desee buscar allí por sí mismo porque no lo leí en profundidad.
Sin embargo, mirando su ejemplo, si la base de datos comienza vacía, puede crear un índice de cada libro en la base de datos para rastrear su orden. A continuación, puede acceder a la matriz para obtener la clave correspondiente. Entonces, por ejemplo , idx[0] es el nombre/clave del primer libro agregado a la base de datos.
Dicho todo esto, no estoy muy familiarizado con el manejo de datos, por lo que puede haber una mejor solución o una integrada en la biblioteca que está utilizando. Le animo a consultar la documentación: https://www.npmjs.com/package/idb/v/3.0.2