Home >Web Front-end >HTML Tutorial >How do I use IndexedDB for client-side database storage in HTML5?
IndexedDB is a low-level API for client-side storage of structured data, including files/blobs. To use IndexedDB in HTML5 for client-side database storage, you can follow these steps:
Open a Database:
Begin by opening a connection to the IndexedDB database. This can be done using the indexedDB.open()
method. You will specify a name for your database and optionally a version number. The onupgradeneeded
event handler is used to set up the database schema when the database is created or its version changes.
<code class="javascript">const request = indexedDB.open("MyDatabase", 1); request.onupgradeneeded = function(event) { const db = event.target.result; // Create an objectStore for this database const objectStore = db.createObjectStore("items", { keyPath: "id" }); // Create an index to search items by name objectStore.createIndex("name", "name", { unique: false }); };</code>
Add Data:
To add data to your IndexedDB database, you first open a transaction, then use the add()
or put()
method on the object store.
<code class="javascript">request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(["items"], "readwrite"); const objectStore = transaction.objectStore("items"); const request = objectStore.add({ id: 1, name: "item1", price: 10 }); request.onsuccess = function(event) { console.log("Item added to the database"); }; };</code>
Retrieve Data:
To retrieve data, you can use the get()
method if you know the key. For more complex queries, you can use cursors or indexes.
<code class="javascript">request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(["items"], "readonly"); const objectStore = transaction.objectStore("items"); const request = objectStore.get(1); request.onsuccess = function(event) { console.log("Item retrieved: ", event.target.result); }; };</code>
Update and Delete Data:
Updating data can be done using the put()
method, which will insert or update the data based on the key. To delete data, use the delete()
method.
<code class="javascript">request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(["items"], "readwrite"); const objectStore = transaction.objectStore("items"); const requestUpdate = objectStore.put({ id: 1, name: "item1 updated", price: 15 }); const requestDelete = objectStore.delete(2); };</code>
Error Handling:
Always handle errors using the onerror
event to catch any issues that arise during database operations.
<code class="javascript">request.onerror = function(event) { console.log("Database error: " event.target.errorCode); };</code>
IndexedDB offers several benefits for storing data on the client side:
Ensuring data persistence and security in IndexedDB involves several key practices:
Data Persistence:
Data Security:
When implementing IndexedDB, it's important to avoid common pitfalls that can lead to performance issues or application failures:
onerror
event handlers to catch and log errors.idb
to abstract browser differences.The above is the detailed content of How do I use IndexedDB for client-side database storage in HTML5?. For more information, please follow other related articles on the PHP Chinese website!