建設(shè)部電教中心網(wǎng)站,互聯(lián)網(wǎng)推廣銷售是做什么的,平面設(shè)計(jì)素材圖,網(wǎng)站如何做竟價(jià)IndexedDB 是瀏覽器端#xff08;客戶端#xff09;的? NoSQL 面向?qū)ο髷?shù)據(jù)庫#xff0c;用于持久化存儲大量結(jié)構(gòu)化數(shù)據(jù)#xff08;如對象、數(shù)組、文件等#xff09;#xff0c;是 Web 平臺提供的客戶端存儲解決方案之一#xff08;與 localStorage、sessionStorage 同…IndexedDB 是瀏覽器端客戶端的?NoSQL 面向?qū)ο髷?shù)據(jù)庫用于持久化存儲大量結(jié)構(gòu)化數(shù)據(jù)如對象、數(shù)組、文件等是 Web 平臺提供的客戶端存儲解決方案之一與 localStorage、sessionStorage 同屬“Web Storage”家族但能力更強(qiáng)。關(guān)鍵是IndexedDB不需要單獨(dú)安裝它是瀏覽器原生支持的 Web 標(biāo)準(zhǔn) API現(xiàn)代瀏覽器Chrome、Firefox、Safari、Edge、Opera 等均默認(rèn)集成了該 API無需用戶手動下載、安裝任何額外軟件或庫。一、核心定位與特點(diǎn)IndexedDB 的設(shè)計(jì)目標(biāo)是解決傳統(tǒng) Web 存儲localStorage/sessionStorage的局限性大容量通常支持幾十 MB 到數(shù)百 MB的存儲具體取決于瀏覽器和設(shè)備遠(yuǎn)大于localStorage的 ~5MB 限制異步操作所有 API 都是異步的基于回調(diào)或 Promise不會阻塞主線程避免頁面卡頓結(jié)構(gòu)化存儲以對象倉庫Object Store為單位存儲數(shù)據(jù)類似數(shù)據(jù)庫的“表”值可以是任意 JavaScript 對象無需序列化為字符串索引與高效查詢支持為對象屬性創(chuàng)建索引類似數(shù)據(jù)庫的“索引列”能通過索引快速過濾/排序數(shù)據(jù)比遍歷所有數(shù)據(jù)高效得多事務(wù)支持所有操作都在事務(wù)中執(zhí)行保證數(shù)據(jù)一致性比如“轉(zhuǎn)賬”式的多步操作要么全成功要么全回滾離線可用數(shù)據(jù)存儲在用戶本地瀏覽器無需網(wǎng)絡(luò)即可訪問適合離線應(yīng)用。二、與其他 Web 存儲的區(qū)別特性?localStorage/sessionStorage?IndexedDB?存儲類型鍵值對值必須是字符串鍵值對值可以是任意對象容量~5MB幾十~幾百 MB操作方式同步阻塞主線程異步非阻塞查詢能力僅能通過鍵精確查找支持索引、范圍查詢、排序適用場景小量簡單數(shù)據(jù)如用戶偏好大量結(jié)構(gòu)化數(shù)據(jù)如離線緩存三、核心概念理解 IndexedDB 需先掌握幾個(gè)關(guān)鍵術(shù)語數(shù)據(jù)庫Database每個(gè)域名下可創(chuàng)建多個(gè)數(shù)據(jù)庫默認(rèn)版本號從 1 開始用于存儲相關(guān)數(shù)據(jù)。對象倉庫Object Store數(shù)據(jù)庫中的“表”用于存儲鍵值對鍵是唯一標(biāo)識值可以是對象。例如一個(gè)“筆記”應(yīng)用的 Object Store 可存每篇筆記的標(biāo)題、內(nèi)容、時(shí)間等。索引Index為 Object Store 中的某個(gè)屬性創(chuàng)建的“快捷查詢通道”。例如為“筆記”的“創(chuàng)建時(shí)間”屬性建索引就能快速找到“最近7天的筆記”。事務(wù)Transaction所有操作增刪改查必須在事務(wù)中執(zhí)行保證原子性要么全成要么全敗。游標(biāo)Cursor用于遍歷 Object Store 或索引中的數(shù)據(jù)類似數(shù)據(jù)庫的“指針”。四、典型使用場景IndexedDB 是離線優(yōu)先應(yīng)用Offline-first和PWA漸進(jìn)式 Web 應(yīng)用的核心技術(shù)之一常見場景包括離線數(shù)據(jù)緩存比如將新聞列表、商品詳情等數(shù)據(jù)存到本地?zé)o網(wǎng)絡(luò)時(shí)仍能展示復(fù)雜客戶端存儲比如筆記/待辦應(yīng)用的多條記錄、離線地圖的瓦片數(shù)據(jù)、大型表單的草稿高效查詢需求比如電商應(yīng)用的“按價(jià)格區(qū)間篩選商品”“按銷量排序”本地文件存儲結(jié)合 Blob 對象可存圖片、音頻等二進(jìn)制文件比如離線相冊。五、注意事項(xiàng)兼容性現(xiàn)代瀏覽器Chrome、Firefox、Safari、Edge均支持但 IE10 部分支持已淘汰無需考慮同源策略每個(gè)域名下的 IndexedDB 獨(dú)立不同域名無法互相訪問異步 API需用回調(diào)或async/await結(jié)合 Promise 封裝處理避免同步等待數(shù)據(jù)清理瀏覽器可能會自動清理長期未用的 IndexedDB 數(shù)據(jù)比如用戶手動清除緩存時(shí)。六、簡單示例概念演示以下是一個(gè)創(chuàng)建數(shù)據(jù)庫→添加數(shù)據(jù)→查詢數(shù)據(jù)的簡化流程用 Promise 封裝// 打開/創(chuàng)建數(shù)據(jù)庫名為“myDB”版本1 const request indexedDB.open(myDB, 1); request.onupgradeneeded (e) { const db e.target.result; // 創(chuàng)建對象倉庫notes鍵為自增ID const store db.createObjectStore(notes, { keyPath: id, autoIncrement: true }); // 為“title”屬性創(chuàng)建索引允許重復(fù) store.createIndex(titleIndex, title, { unique: false }); }; request.onsuccess (e) { const db e.target.result; // 開啟事務(wù)操作“notes”倉庫讀寫模式 const tx db.transaction(notes, readwrite); const store tx.objectStore(notes); // 添加一條筆記 store.add({ title: 第一篇筆記, content: Hello IndexedDB! }); // 通過索引查詢標(biāo)題包含“第一篇”的筆記 const index store.index(titleIndex); const request index.get(第一篇筆記); // 精確查詢 request.onsuccess () console.log(request.result); // {id:1, title: ..., content: ...} };總結(jié)IndexedDB 是瀏覽器端的“輕量級數(shù)據(jù)庫”適合存儲大量、結(jié)構(gòu)化、需高效查詢的本地?cái)?shù)據(jù)。對于想構(gòu)建的“獨(dú)立 APP”尤其是 PWA 或離線應(yīng)用它是實(shí)現(xiàn)離線能力和復(fù)雜客戶端邏輯的關(guān)鍵技術(shù)之一。后續(xù)學(xué)習(xí)可關(guān)注用idb第三方庫簡化 IndexedDB 的 Promise 封裝避免原生回調(diào)地獄與 Service Worker 配合實(shí)現(xiàn)離線緩存策略比如 Cache API IndexedDB 組合結(jié)合前端框架如 Vue/React的狀態(tài)管理比如用 IndexedDB 做本地持久化?；葜荽髞啚?