Login
Effortless Data Storage with LocalBase and IndexedDB
IndexedDB is a powerful client-side database API for storing structured data in browsers. However, its API is complex, requiring transactions, object stores, and cursors to manage data. LocalBase simplifies IndexedDB by providing an intuitive, promise-based API.
In this blog, we’ll explore LocalBase, its features, and how to use it effectively in web applications.
What is LocalBase?
LocalBase is an easy-to-use JavaScript library that simplifies IndexedDB interactions. It provides a syntax similar to Firestore, making it ideal for developers familiar with Firebase.
Key Features
- Promise based API
- Simple CRUD operations
- No need for manual transaction handling
- Works seamlessly in modern browsers
Installation
You can install LocalBase via npm or use it directly in a script tag
Using npm
npm install localbase
Using CDN
https://cdn.jsdelivr.net/npm/localbase/dist/localbase.min.js
Getting Started with LocalBase
First, initialize the database
let db = new Localbase('myDatabase')
Adding Data
You can add records to a collection,
db.collection('users').add({
id: 1,
name: 'John Doe',
age: 30
})
Fetching Data
Retrieve all records from a collection
db.collection('users').get().then(users => {
console.log(users)
})
Updating Data
To update a record
db.collection('users').doc({ id: 1 }).update({
age: 31
})
Deleting Data
Delete a specific document
db.collection('users').doc({ id: 1 }).delete()
Or delete the entire collection
db.collection('users').delete()
Advanced LocalBase Functionalities
1. Updating Data in LocalBase
LocalBase allows updating specific fields in a document without overwriting the entire record.
Basic Update Example
db.collection('users').doc({ id: 1 }).update({
age: 31
})
This updates only the age field while keeping other fields unchanged.
Updating Multiple Fields
db.collection('users').doc({ id: 1 }).update({
age: 32,
city: 'New York'
})
The city field is added, and age is updated.
Handling Non-Existing Documents
If the document doesn’t exist, LocalBase won’t create it automatically. You can handle this with .get()
db.collection('users').doc({ id: 2 }).get().then(user => {
if (user) {
db.collection('users').doc({ id: 2 }).update({ age: 25 })
} else {
db.collection('users').add({ id: 2, name: 'Alice', age: 25 })
}
})
2. Querying and Filtering Data
You can fetch documents based on conditions.
Get All Documents in a Collection
db.collection('users').get().then(users => {
console.log(users)
})
Get a Single Document
db.collection('users').doc({ id: 1 }).get().then(user => {
console.log(user)
})
Filter with Conditions
db.collection('users').get().then(users => {
let filteredUsers = users.filter(user => user.age > 25)
console.log(filteredUsers)
})
Since LocalBase doesn’t support native where queries, you need to filter manually.
3. Handling Transactions
LocalBase handles transactions internally, so you don’t need to worry about opening and closing them. However, you should use .then() to ensure operations complete before the next action.
Example: Sequential Updates
db.collection('users').doc({ id: 1 }).update({ age: 32 }).then(() => {
return db.collection('users').doc({ id: 1 }).update({ city: 'Los Angeles' })
}).then(() => {
console.log('Update complete')
})
This ensures that the age field is updated before adding the city field.
4. Clearing and Deleting Data
Deleting a Single Document
db.collection('users').doc({ id: 1 }).delete()
Deleting an Entire Collection
db.collection('users').delete()
Clearing All Data
db.delete()
This removes everything from the database!
5. Using LocalBase in Real-World Scenarios
Offline Caching for a To-Do List
db.collection('tasks').add({ id: 1, title: 'Buy groceries', completed: false })
Later, when the app is online, you can sync it with a remote database.
User Preferences Storage
db.collection('settings').doc({ theme: 'dark' }).update({ fontSize: '16px' })
Stores user settings locally, ensuring a smooth UX.
LocalBase makes IndexedDB developer-friendly with
Easy updates without overwriting entire documents Simple filtering with JavaScript functions Automatic transaction handling Efficient storage for offline-first apps
For more details, check out the official repository: GitHub – LocalBase
Got Inspired from 450dsa.com .
