{
    "slug": "js_indexeddb",
    "term": "IndexedDB",
    "category": "javascript",
    "difficulty": "advanced",
    "short": "Browser-native NoSQL database for offline-capable PHP web apps — stores structured data that survives page reloads, complements service workers.",
    "long": "IndexedDB is a transactional object store persisted in the browser. Stores JS objects including Blobs. Indexed for efficient querying. Works offline (alongside Service Workers). Used for: offline drafts before sync to PHP, caching API responses, large client-side datasets. API is callback/promise-based (use idb library for cleaner async). Quota: typically hundreds of MB. Cleared by browser in storage pressure. Not accessible cross-origin.",
    "aliases": [
        "IndexedDB",
        "IDB",
        "browser database",
        "offline storage"
    ],
    "tags": [
        "javascript",
        "storage",
        "offline"
    ],
    "misconception": "IndexedDB is persistent like a server database — the browser can clear it under storage pressure (low disk space); always sync critical data to your PHP backend and treat IndexedDB as a cache.",
    "why_it_matters": "PHP apps serving mobile users need offline capabilities — IndexedDB stores form drafts, cached content, and pending actions that sync to PHP when connectivity returns.",
    "common_mistakes": [
        "Not handling storage quota errors",
        "Not syncing to PHP backend — treating IndexedDB as the source of truth",
        "Using raw IndexedDB API instead of idb library",
        "Blocking UI with synchronous-looking patterns (it's async)"
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_storage_apis",
        "progressive_web_apps",
        "js_fetch_api"
    ],
    "prerequisites": [
        "js_async_await",
        "js_promises"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API"
    ],
    "bad_code": "// Raw API — verbose and error-prone:\nconst req = indexedDB.open('app', 1);\nreq.onupgradeneeded = e => e.target.result.createObjectStore('drafts');\nreq.onsuccess = e => {\n    const db = e.target.result; // nested callbacks...\n};",
    "good_code": "// idb library — clean async/await:\nimport { openDB } from 'idb';\n\nconst db = await openDB('app', 1, {\n    upgrade(db) { db.createObjectStore('drafts', { keyPath: 'id' }); }\n});\n\n// Save draft locally:\nawait db.put('drafts', { id: 'post-1', content: editor.value, savedAt: Date.now() });\n\n// Sync to PHP when online:\nnavigator.onLine && await fetch('/api/drafts', { method:'POST', body: JSON.stringify(draft) });",
    "quick_fix": "Use the idb library (wrapper) for clean async/await syntax; always sync critical data to PHP backend — IndexedDB can be cleared by the browser",
    "severity": "medium",
    "effort": "high",
    "created": "2026-03-17",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_indexeddb",
        "html_url": "https://codeclaritylab.com/glossary/js_indexeddb",
        "json_url": "https://codeclaritylab.com/glossary/js_indexeddb.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[IndexedDB](https://codeclaritylab.com/glossary/js_indexeddb) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_indexeddb"
            }
        }
    }
}