[{"data":1,"prerenderedAt":301},["ShallowReactive",2],{"term-i\u002Findexeddb":3,"related-i\u002Findexeddb":286},{"id":4,"title":5,"acronym":6,"body":7,"category":268,"description":269,"difficulty":270,"extension":271,"letter":272,"meta":273,"navigation":79,"path":274,"related":275,"seo":280,"sitemap":281,"stem":284,"subcategory":6,"__hash__":285},"terms\u002Fterms\u002Fi\u002Findexeddb.md","IndexedDB",null,{"type":8,"value":9,"toc":262},"minimark",[10,15,19,23,26,30,251,255,258],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"IndexedDB is a full-on database living inside your browser. Unlike LocalStorage's tiny notebook, IndexedDB can store gigabytes of structured data and query it efficiently. It's what apps like Google Docs and Figma use to store your work offline. The API is notoriously clunky, so everyone uses a wrapper library.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"IndexedDB is a low-level browser API for client-side storage of significant amounts of structured data, including files and blobs. It is a transactional, object-oriented database with indexes for efficient querying. The native API is complex; libraries like Dexie.js provide a more ergonomic interface. Storage limits are typically 50% of available disk space.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Using Dexie.js (IndexedDB wrapper)\nimport Dexie from 'dexie'\n\nconst db = new Dexie('MyDatabase')\ndb.version(1).stores({ notes: '++id, title, body' })\n\nawait db.notes.add({ title: 'My Note', body: 'Hello IndexedDB' })\nconst allNotes = await db.notes.toArray()\n","javascript","",[38,39,40,49,74,81,115,165,170,224],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Using Dexie.js (IndexedDB wrapper)\n",[41,50,52,56,60,63,67,71],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sTEyZ"," Dexie ",[41,61,62],{"class":54},"from",[41,64,66],{"class":65},"sMK4o"," '",[41,68,70],{"class":69},"sfazB","dexie",[41,72,73],{"class":65},"'\n",[41,75,77],{"class":43,"line":76},3,[41,78,80],{"emptyLinePlaceholder":79},true,"\n",[41,82,84,88,91,94,97,101,104,107,110,112],{"class":43,"line":83},4,[41,85,87],{"class":86},"spNyl","const",[41,89,90],{"class":58}," db ",[41,92,93],{"class":65},"=",[41,95,96],{"class":65}," new",[41,98,100],{"class":99},"s2Zo4"," Dexie",[41,102,103],{"class":58},"(",[41,105,106],{"class":65},"'",[41,108,109],{"class":69},"MyDatabase",[41,111,106],{"class":65},[41,113,114],{"class":58},")\n",[41,116,118,121,124,127,129,133,136,138,141,143,146,150,153,155,158,160,163],{"class":43,"line":117},5,[41,119,120],{"class":58},"db",[41,122,123],{"class":65},".",[41,125,126],{"class":99},"version",[41,128,103],{"class":58},[41,130,132],{"class":131},"sbssI","1",[41,134,135],{"class":58},")",[41,137,123],{"class":65},[41,139,140],{"class":99},"stores",[41,142,103],{"class":58},[41,144,145],{"class":65},"{",[41,147,149],{"class":148},"swJcz"," notes",[41,151,152],{"class":65},":",[41,154,66],{"class":65},[41,156,157],{"class":69},"++id, title, body",[41,159,106],{"class":65},[41,161,162],{"class":65}," }",[41,164,114],{"class":58},[41,166,168],{"class":43,"line":167},6,[41,169,80],{"emptyLinePlaceholder":79},[41,171,173,176,179,181,184,186,189,191,193,196,198,200,203,205,208,211,213,215,218,220,222],{"class":43,"line":172},7,[41,174,175],{"class":54},"await",[41,177,178],{"class":58}," db",[41,180,123],{"class":65},[41,182,183],{"class":58},"notes",[41,185,123],{"class":65},[41,187,188],{"class":99},"add",[41,190,103],{"class":58},[41,192,145],{"class":65},[41,194,195],{"class":148}," title",[41,197,152],{"class":65},[41,199,66],{"class":65},[41,201,202],{"class":69},"My Note",[41,204,106],{"class":65},[41,206,207],{"class":65},",",[41,209,210],{"class":148}," body",[41,212,152],{"class":65},[41,214,66],{"class":65},[41,216,217],{"class":69},"Hello IndexedDB",[41,219,106],{"class":65},[41,221,162],{"class":65},[41,223,114],{"class":58},[41,225,227,229,232,234,237,239,241,243,245,248],{"class":43,"line":226},8,[41,228,87],{"class":86},[41,230,231],{"class":58}," allNotes ",[41,233,93],{"class":65},[41,235,236],{"class":54}," await",[41,238,178],{"class":58},[41,240,123],{"class":65},[41,242,183],{"class":58},[41,244,123],{"class":65},[41,246,247],{"class":99},"toArray",[41,249,250],{"class":58},"()\n",[11,252,254],{"id":253},"when-youll-hear-this","When You'll Hear This",[16,256,257],{},"We use IndexedDB via Dexie.js to cache the product catalog offline.,IndexedDB can store gigabytes — LocalStorage tops out at ~5MB.,Use Dexie.js or idb to avoid the raw IndexedDB API's complexity.",[259,260,261],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":263},[264,265,266,267],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":253,"depth":51,"text":254},"frontend","IndexedDB is a full-on database living inside your browser.","advanced","md","i",{},"\u002Fterms\u002Fi\u002Findexeddb",[276,277,278,279],"LocalStorage","SessionStorage","PWA","Service Worker",{"title":5,"description":269},{"changefreq":282,"priority":283},"weekly",0.7,"terms\u002Fi\u002Findexeddb","BxnDewmX4cDanxX5BThYqDqoOH7wT0Thw9Xszxx_LW4",[287,291,295,298],{"title":276,"path":288,"acronym":6,"category":268,"difficulty":289,"description":290},"\u002Fterms\u002Fl\u002Flocalstorage","beginner","LocalStorage is a simple key-value storage built into every browser that persists even after you close the tab.",{"title":278,"path":292,"acronym":278,"category":268,"difficulty":293,"description":294},"\u002Fterms\u002Fp\u002Fpwa","intermediate","A PWA is a website that pretends to be an app.",{"title":279,"path":296,"acronym":6,"category":268,"difficulty":270,"description":297},"\u002Fterms\u002Fs\u002Fservice-worker","A Service Worker is a JavaScript script that runs in the background, separate from your web page.",{"title":277,"path":299,"acronym":6,"category":268,"difficulty":289,"description":300},"\u002Fterms\u002Fs\u002Fsessionstorage","SessionStorage is just like LocalStorage except it forgets everything when you close the browser tab.",1776518288594]