This a sample project, product of a series of tutorials made by myself on DEV. The aim is to teach/learn the basics of the IndexedDB API, specifically:
- Learn about the concepts of transactions, requests, object stores
- Learn how to perform CRUD operations in the IndexedDB instance
You can read the blog here.
- Create a task: You can create a brand new task with a given title and description. Later that task is saved using JavaScript IndexedDB API.
- Show saved tasks: Everytime the page loads it will query the indexed database to get all saved tasks and display them as panels at the bottom of the page.
- Edit a task: You can edit any given task at any given moment.
- Toggle the "done" status of a task: You can toggle whether a task is "done" via either a checkbox or while editing the task.
Here are the starting and finished code templates for each part of the tutorial series.
| Part | ||
|---|---|---|
First Part (Creating the persist function) |
Starting Code | Finished Code |
Second Part (Creating the getOpenCursor function) |
Starting Code | Finished Code |
Third Part (Creating the delete function) |
Starting Code | Finished Code |
Once you download the code, execute the following commands.
To install all the dependencies:
npm install
To start the local development server:
npm run start
Please refer to the contributing guide.