Introduction to IndexedDBShim
IndexedDBShim is a polyfill that adds IndexedDB support for browsers that do not have native support or have partial support. This enables web applications to use IndexedDB for client-side storage, ensuring your app works seamlessly across different browsers.
Setting Up IndexedDBShim
To get started, you need to include IndexedDBShim in your project. You can do this by installing it via npm:
npm install indexeddbshimNext, include the script in your HTML:
<script src="path/to/indexeddbshim.min.js"></script>
Creating and Opening a Database
Here is how you can create and open a database using IndexedDBShim:
var openRequest = indexedDB.open('MyTestDatabase', 1);
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore('MyObjectStore', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
};
openRequest.onsuccess = function(event) {
var db = event.target.result;
console.log('Database opened successfully');
};
openRequest.onerror = function(event) {
console.error('Error opening database:', event.target.errorCode);
};
Adding Data to the Object Store
To add data:
var transaction = db.transaction(['MyObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('MyObjectStore');
var addRequest = objectStore.add({ id: 1, name: 'John Doe', email: 'john.doe@example.com' });
addRequest.onsuccess = function(event) {
console.log('Data added successfully');
};
addRequest.onerror = function(event) {
console.error('Error adding data:', event.target.errorCode);
};
Reading Data from the Object Store
To read data:
var transaction = db.transaction(['MyObjectStore']);
var objectStore = transaction.objectStore('MyObjectStore');
var getRequest = objectStore.get(1);
getRequest.onsuccess = function(event) {
var data = event.target.result;
console.log('Data retrieved:', data);
};
getRequest.onerror = function(event) {
console.error('Error retrieving data:', event.target.errorCode);
};
Updating Data in the Object Store
To update data:
var transaction = db.transaction(['MyObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('MyObjectStore');
var updateRequest = objectStore.put({ id: 1, name: 'John Doe', email: 'john.doe@newdomain.com' });
updateRequest.onsuccess = function(event) {
console.log('Data updated successfully');
};
updateRequest.onerror = function(event) {
console.error('Error updating data:', event.target.errorCode);
};
Deleting Data from the Object Store
To delete data:
var transaction = db.transaction(['MyObjectStore'], 'readwrite');
var objectStore = transaction.objectStore('MyObjectStore');
var deleteRequest = objectStore.delete(1);
deleteRequest.onsuccess = function(event) {
console.log('Data deleted successfully');
};
deleteRequest.onerror = function(event) {
console.error('Error deleting data:', event.target.errorCode);
};
A Complete Example Application
Here’s an example of a complete application using IndexedDBShim:
<!DOCTYPE html>
<html>
<head>
<title>IndexedDBShim Example</title>
<script src="path/to/indexeddbshim.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var openRequest = indexedDB.open('MyAppDatabase', 1);
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
var objectStore = db.createObjectStore('users', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
}
};
openRequest.onerror = function(event) {
console.error('Error opening database:', event.target.errorCode);
};
openRequest.onsuccess = function(event) {
var db = event.target.result;
var addBtn = document.getElementById('add');
var updateBtn = document.getElementById('update');
var deleteBtn = document.getElementById('delete');
var getBtn = document.getElementById('get');
addBtn.addEventListener('click', function() {
var transaction = db.transaction(['users'], 'readwrite');
var objectStore = transaction.objectStore('users');
var addRequest = objectStore.add({ id: 1, name: 'Alice', email: 'alice@example.com' });
addRequest.onsuccess = function(event) {
console.log('User added');
};
addRequest.onerror = function(event) {
console.error('Error adding user:', event.target.errorCode);
};
});
updateBtn.addEventListener('click', function() {
var transaction = db.transaction(['users'], 'readwrite');
var objectStore = transaction.objectStore('users');
var updateRequest = objectStore.put({ id: 1, name: 'Alice', email: 'alice@newdomain.com' });
updateRequest.onsuccess = function(event) {
console.log('User updated');
};
updateRequest.onerror = function(event) {
console.error('Error updating user:', event.target.errorCode);
};
});
deleteBtn.addEventListener('click', function() {
var transaction = db.transaction(['users'], 'readwrite');
var objectStore = transaction.objectStore('users');
var deleteRequest = objectStore.delete(1);
deleteRequest.onsuccess = function(event) {
console.log('User deleted');
};
deleteRequest.onerror = function(event) {
console.error('Error deleting user:', event.target.errorCode);
};
});
getBtn.addEventListener('click', function() {
var transaction = db.transaction(['users']);
var objectStore = transaction.objectStore('users');
var getRequest = objectStore.get(1);
getRequest.onsuccess = function(event) {
var user = event.target.result;
console.log('User retrieved: ', user);
};
getRequest.onerror = function(event) {
console.error('Error retrieving user:', event.target.errorCode);
};
});
};
});
</script>
</head>
<body>
<button id="add">Add User</button>
<button id="update">Update User</button>
<button id="delete">Delete User</button>
<button id="get">Get User</button>
</body>
</html>
By using IndexedDBShim, you can ensure that your web applications work seamlessly across different browsers while leveraging the powerful features of IndexedDB for local storage.
Hash: 3eeb325452bcb87778842c98777cf08b4b3a543c0742b0b360443e8e12531c34
