diff --git a/indexeddb-playground.html b/indexeddb-playground.html new file mode 100644 index 0000000..aa25059 --- /dev/null +++ b/indexeddb-playground.html @@ -0,0 +1,2222 @@ + + + + + + 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 + +
+
+
+
+ + + + + + + + + + + + + + + + + + +