En nuestro artículo anterior, discutimos Dexie, un envoltorio para IndexedDB. En este artículo, discutimos IndexedDB. Debe estar familiarizado con esta API de LocalStorage, comúnmente utilizada para almacenar información en el navegador. Del mismo modo, IndexedDB se usa para el almacenamiento del lado del cliente.

¿Qué es indexeddb?

Mdn Documentation Explication:

IndexedDB es una API de bajo nivel para el almacenamiento del lado del cliente de cantidades significativas de datos estructurados, incluidos archivos/blobs. Esta API utiliza índices para habilitar las búsquedas de alto rendimiento de estos datos. Si bien el almacenamiento web es útil para almacenar cantidades más pequeñas de datos, es menos útil para almacenar grandes cantidades de datos estructurados.

IndexedDB proporciona una solución. Esta es la página de destino principal para la cobertura IndexedDB de MDN: aquí proporcionamos enlaces a las guías de referencia y uso de API completas, detalles de soporte del navegador y alguna explicación de conceptos clave.

Ejemplo Repositorio:

mdn proporciona un ejemplo de repositorio de github y tiene script/toDo.js.

El script se inicializa usando Window.Onload

window.onload = () => {
}

Abra una solicitud a la base de datos:

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

Error de conexión:

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

en la conexión de base de datos exitosa:

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

Agregar datos

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

Observación: LocalStorage vs indexeddb

Es posible que ya se dé cuenta de que se requiere mucho código solo para agregar un registro, tiene devoluciones de llamada asincrónicas como OnError y OnSuccess. Esto se apunta en esta respuesta de intercambio de pila.

Para simplificar el manejo de este indexeddb, se puede usar dexie.

Agregue datos con dexie:

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 
 
{status}
 Name:
  setName(ev.target.value)}
 />
 Age:
  setAge(Number(ev.target.value))}
 />
 Add
 >
 );
}

Esta API de envoltura me recuerda a Orms como Prisma y Roce.

Sobre nosotros:

En ThinkThroo, estudiamos grandes proyectos de código abierto y proporcionamos guías arquitectónicas. Hemos desarrollado componentes de Reubale, construidos con viento de cola, que puede usar en su proyecto. Ofrecemos servicios de desarrollo next.js, reaccionamiento y nodo.

Reserve una reunión con nosotros para discutir su proyecto.

referencias:

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-us/docs/web/api/indexeddb_api

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareEngineering.stackexchange.com/questions/219953/how-is-localstorage-diferent-from-indexeddb