From 2e8a379010ce701aaca86d37ea2a9dbf68810d32 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 11 Dec 2025 05:14:03 +0000 Subject: [PATCH 1/2] Add IndexedDB Playground - comprehensive debug UI for IndexedDB A sophisticated single-file playground that provides: - Database management: create, delete, list all databases - Object store operations: create stores with keyPath/autoIncrement options - Index management: create indexes with unique/multiEntry support - Full CRUD operations: add, edit, delete records with JSON editor - Query builder: get all, get by key, key range queries, index queries - Schema visualization: tree view of database structure - Import/Export: JSON and CSV export, JSON import with optional clear - Console panel: real-time logging of all operations - Documentation: quick reference for IndexedDB concepts and code examples Features a modern dark UI with responsive layout. --- indexeddb-playground.html | 2214 +++++++++++++++++++++++++++++++++++++ 1 file changed, 2214 insertions(+) create mode 100644 indexeddb-playground.html diff --git a/indexeddb-playground.html b/indexeddb-playground.html new file mode 100644 index 0000000..1db5082 --- /dev/null +++ b/indexeddb-playground.html @@ -0,0 +1,2214 @@ + + + + + + IndexedDB Playground + + + +
+
+

+ 🗄️ + IndexedDB Playground +

+
+ + +
+
+ + + +
+
+
Data
+
Query
+
Schema
+
Import/Export
+
Documentation
+
+ +
+ +
+
+ + +
+ +
+
+
+
📋
+

No Data to Display

+

Select a database and object store to view records

+
+
+
+ + +
+
+
Query Builder
+
+ + +
+ + + + + + + +
+ + +
+ + +
+ +
+ +
+
+
+ + +
+
+
+
📊
+

No Schema to Display

+

Select a database to view its schema

+
+
+
+ + +
+
+
+
Export Data
+
+ + +
+
+ + +
+ +
+ +
+
Import Data
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+

What is IndexedDB?

+

IndexedDB is a low-level API for storing large amounts of structured data in the browser. It's a transactional database system using key-value pairs with support for indexes.

+
+ +
+

Key Concepts

+
    +
  • Database - Container for object stores. Has a name and version number.
    • +
  • Object Store - Like a table. Holds records as key-value pairs.
    • +
  • Key - Unique identifier for records. Can be in-line (keyPath) or out-of-line.
    • +
  • Index - Enables searching by properties other than the primary key.
    • +
  • Transaction - All operations happen within transactions (readonly/readwrite/versionchange).
    • +
  • Cursor - Mechanism for iterating over records.
    • +
+
+ +
+

Quick Reference

+ +

Opening a Database

+
const request = indexedDB.open('myDB', 1); +request.onupgradeneeded = (e) => { + const db = e.target.result; + db.createObjectStore('users', { keyPath: 'id' }); +};
+ +

Adding Data

+
const tx = db.transaction('users', 'readwrite'); +const store = tx.objectStore('users'); +store.add({ id: 1, name: 'Alice' });
+ +

Reading Data

+
const tx = db.transaction('users', 'readonly'); +const store = tx.objectStore('users'); +const request = store.get(1); +request.onsuccess = () => console.log(request.result);
+ +

Using Cursors

+
store.openCursor().onsuccess = (e) => { + const cursor = e.target.result; + if (cursor) { + console.log(cursor.key, cursor.value); + cursor.continue(); + } +};
+ +

Key Ranges

+
// Records with keys from 1 to 10 +IDBKeyRange.bound(1, 10); +// Records with keys > 5 +IDBKeyRange.lowerBound(5, true); +// Records with keys <= 100 +IDBKeyRange.upperBound(100);
+
+ +
+

Data Types

+

IndexedDB can store most JavaScript types including:

+
    +
  • String, Number, Boolean, null
    • +
  • Array, Object (plain objects)
    • +
  • Date, RegExp
    • +
  • Blob, File, ArrayBuffer
    • +
  • Note: Functions and DOM nodes cannot be stored
    • +
+
+ +
+

Browser Support

+

IndexedDB is supported in all modern browsers. Storage limits vary but typically allow several GB per origin.

+
+
+
+
+ + + +
+
+ Console + +
+
+
+
+ + + + + + + + + + + + + + + + + + + From 8c343607e7041467102741775dbb84afa2beadca Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 11 Dec 2025 05:20:57 +0000 Subject: [PATCH 2/2] Add create buttons to sidebar for narrow screens The "+ Create Object Store" and "+ Create Index" buttons are now also available in the sidebar section headers, so they remain accessible when the right panel is hidden on narrower viewports. --- indexeddb-playground.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/indexeddb-playground.html b/indexeddb-playground.html index 1db5082..aa25059 100644 --- a/indexeddb-playground.html +++ b/indexeddb-playground.html @@ -734,7 +734,10 @@

Object Stores - 0 + + 0 + +
@@ -746,7 +749,10 @@

Indexes - 0 + + 0 + +
@@ -1256,6 +1262,7 @@

Edit Record

function enableDatabaseActions() { document.getElementById('createStoreBtn').disabled = false; + document.getElementById('createStoreBtnSidebar').disabled = false; document.getElementById('deleteDbBtn').disabled = false; document.getElementById('exportBtn').disabled = false; } @@ -1300,6 +1307,7 @@

Edit Record

document.getElementById('addRecordBtn').disabled = false; document.getElementById('clearRecordsBtn').disabled = false; document.getElementById('createIndexBtn').disabled = false; + document.getElementById('createIndexBtnSidebar').disabled = false; document.getElementById('executeQueryBtn').disabled = false; document.getElementById('importBtn').disabled = false; }