Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>IndexedDB Example</title> </head> <body> <h1>Task Manager</h1> <input type="text" id="taskInput" placeholder="Enter a task" /> <button onclick="addTask()">Add Task</button> <ul id="taskList"></ul> <script> let db; window.onload = function () { let request = window.indexedDB.open("TaskDB", 1); request.onerror = function (event) { console.error("Database error:", event.target.errorCode); }; request.onsuccess = function (event) { db = request.result; readTasks(); }; request.onupgradeneeded = function (event) { let db = event.target.result; let objectStore = db.createObjectStore("tasks", { keyPath: "id", autoIncrement: true, }); objectStore.createIndex("task", "task", { unique: false }); }; }; function addTask() { let task = document.getElementById("taskInput").value; let transaction = db.transaction(["tasks"], "readwrite"); let objectStore = transaction.objectStore("tasks"); let request = objectStore.add({ task: task }); request.onsuccess = function () { readTasks(); }; request.onerror = function (event) { console.error("Error adding task:", event.target.errorCode); }; document.getElementById("taskInput").value = ""; } function readTasks() { let objectStore = db.transaction("tasks").objectStore("tasks"); document.getElementById("taskList").innerHTML = ""; objectStore.openCursor().onsuccess = function (event) { let cursor = event.target.result; if (cursor) { let li = document.createElement("li"); li.textContent = cursor.value.task; document.getElementById("taskList").appendChild(li); cursor.continue(); } }; } </script> </body> </html>