做摄影网站的目的是什么意思创造力网站设计

做摄影网站的目的是什么意思,创造力网站设计,姓氏头像在线制作免费生成图片,国家企业信用公示网全国上海✨ 引言 如果你做过前端#xff0c;一定踩过这些坑#xff1a; localStorage 限制太小#xff0c;数据根本存不下每次刷新都要重新请求数据#xff0c;浪费时间网络稍微差一点页面就白屏想查数据只能粗暴遍历#xff0c;没有索引 于是#xff0c;浏览器世界决定给我们一个…✨ 引言如果你做过前端一定踩过这些坑localStorage 限制太小数据根本存不下每次刷新都要重新请求数据浪费时间网络稍微差一点页面就白屏想查数据只能粗暴遍历没有索引于是浏览器世界决定给我们一个“像数据库一样工作的本地数据库引擎”IndexedDB — 支持事务、索引、异步操作、容量巨大专为浏览器本地结构化数据而生。简单理解localStorage 小本子IndexedDB 真·数据库如果你曾经吐槽过localStorage只有5MB的容量、sessionStorage一刷新就没了、WebSQL已凉凉那 IndexedDB 绝对值得你深入看看。 需求背景随着 Web 应用“App 化”浏览器端需要支持大量数据缓存GB 级别不再 5MB离线支持断网还能正常用复杂结构数据本地化对象、数组、Blob具有查询能力按字段检索减少服务器压力和等待时间典型场景包括PWA 离线缓存聊天记录本地存储大型列表前端分页图片、音视频素材描述缓存电商购物车与离线下单数据备份与恢复一句话浏览器从“渲染页面”演变为“承载应用”而 IndexedDB 就是本地数据库基础设施。⚙️ 工作原理下面是“工作原理” 部分的全新重写内容保持深度与专业感同时避免重复你之前看到的表述⚙️ 工作原理全新改写IndexedDB 的核心思想不是“键值对存储”而是一套基于事件、事务与索引的数据管理系统。你可以把它理解成浏览器内置的一种NoSQL 数据库具备以下几个关键运行机制 1. 版本化数据库Versioned DBIndexedDB严格依赖版本号。当你第一次打开数据库或要新增字段结构如新增索引、调整主键时浏览器会要求传入更高的版本号以触发一次onupgradeneeded这相当于DDL 阶段你只能在这里创建表Object Store、修改结构。它避免了“随便打开就改 schema”的混乱模式。 2. Object Store —— 类似表但无固定 SchemaIndexedDB 不存“行列”而存“对象”。每个对象存储Object Store都有自己的 key 生成方式指定keyPath或自动递增autoIncrement无需定义字段类型也不用 schema 约束这就让 IndexedDB 更像 MongoDB。 3. Index —— 决定查询能力的核心IndexedDB 不允许直接“按任意字段搜索”如果你希望某字段能高效查询必须提前建立索引Index。存储层会维护一棵 B 树索引结构保证查找复杂度为 O(log n)不需要自己在数组中暴力filter如果未创建索引那么你只能用 Cursor 做全量遍历。 4. Transaction —— 所有操作都必须在事务中完成IndexedDB 禁止“裸写”。每一次增删改查都必须通过事务执行它的生命周期分为readonly— 查询场景readwrite— 数据变更versionchange— 数据库结构升级事务一旦结束所有 ObjectStore Handler 会失效确保数据库不会被悬空操作污染。⚡ 5. 全异步模型基于事件驱动IndexedDB 采用非阻塞 IO核心 API 不返回 Promise而是事件回调onsuccessonerroronblocked之所以刻意不用同步是为了避免 UI 主线程被锁死——浏览器从设计层面杜绝“卡住页面”。也正因为这种事件体系才催生出idb、Dexie等 Promise 封装库。 6. 数据存储格式结构化克隆算法IndexedDB 底层使用结构化克隆算法Structured Clone储存对象支持嵌套对象支持 Date、Map、Blob、File不需要你手动 JSON encode/decode相比localStorage它真正意义上能“存对象”。 7. 游标Cursor是读取大数据的关键IndexedDB 在数据读取方面更像数据库游标扫描openCursor()遍历记录支持范围过滤IDBKeyRange可用于分页、增量渲染、批量索引游标模式天生支持“百万数据分批读取”这也是它适用于大数据前端场景的原因。 代码实现示例下面提供一份完整示例演示创建数据库、插入数据、读取索引数据。IndexedDB 是运行在浏览器内部的本地数据库由浏览器底层实现数据存放在用户本地磁盘中不会上传服务器。因此它属于站点级资源同源策略限制只能被 同域代码访问。1. 创建数据库与表结构constDB_NAMEuser-db// 数据库名称constSTORE_NAMEusers// 表的名称constVERSION1// 数据库版本号/** * 初始化 / 打开 IndexedDB 数据库 * 说明 * - indexedDB.open() 是异步调用 * - 第一次打开会创建数据库 * - 版本号升级会触发 onupgradeneeded 事件用于修改结构 */functioninitDB(){returnnewPromise((resolve,reject){// 创建或打开一个本地数据库constrequestindexedDB.open(DB_NAME,VERSION)// 打开失败比如权限异常或被用户禁止request.onerror()reject(request.error)/** * 数据库不存在 或 版本号变更时触发 * 只允许在此事件内执行创建表、索引、修改结构等操作 */request.onupgradeneeded(event){constdbrequest.resultconststoredb.createObjectStore(STORE_NAME,{keyPath:id})store.createIndex(ageIndex,age,{unique:false})}request.onsuccess()resolve(request.result)})}2. 插入数据asyncfunctionaddUser(user){constdbawaitinitDB()// 等待数据库初始化完成获取 db 实例consttxdb.transaction(STORE_NAME,readwrite)// 开启一个事务类型为 readwrite允许读写操作conststoretx.objectStore(STORE_NAME)store.add(user)// 将用户对象写入 store 中returntx.complete}// 示例调用addUser({id:001,name:Tom,age:23})3. 按索引查询asyncfunctionqueryByAge(age){constdbawaitinitDB()// 等待数据库初始化完成获取 db 实例consttxdb.transaction(STORE_NAME,readonly)// 开启一个只读事务不允许修改数据conststoretx.objectStore(STORE_NAME)constindexstore.index(ageIndex)// 获取之前创建的 ageIndex 索引用于按 age 查询constrequestindex.getAll(age)// 使用索引查询所有匹配指定 age 的记录// 返回一个 Promise封装 onsuccess 回调returnnewPromise((resolve){request.onsuccess()resolve(request.result)})}// 示例调用queryByAge(23).then(console.log)4. 更新数据asyncfunctionupdateUser(id,data){constdbawaitinitDB()consttxdb.transaction(STORE_NAME,readwrite)conststoretx.objectStore(STORE_NAME)constoldDataawaitstore.get(id)store.put({...oldData,...data})}5. 删除数据asyncfunctiondeleteUser(id){constdbawaitinitDB()consttxdb.transaction(STORE_NAME,readwrite)conststoretx.objectStore(STORE_NAME)store.delete(id)} 解决痛点IndexedDB 解决了很多本地存储“卡脖子”的问题✔ 容量大可达 GB 级localStorage5MB 左右IndexedDB 没有固定上限由浏览器与磁盘限制决定。✔ 支持结构化对象无需JSON.stringify()支持复杂对象、Blob、ArrayBuffer 等。✔ 支持索引查询如查询年龄 23 的所有用户无需遍历数组调用index.getAll()即可。✔ 异步性能高I/O 不会阻塞 UI。✔ 适合离线应用与 PWA搭配ServiceWorker简直完美。 竞品分析技术容量查询能力异步适用场景localStorage~5MB❌ 无索引❌ 同步阻塞小数据配置sessionStorage~5MB❌ 无索引❌ 同步阻塞会话状态Cookie4KB❌ 无索引❌ 请求头传输登录态WebSQL废弃✔ SQL✔ 异步历史包袱IndexedDBGB 级✔ 索引查询✔ 异步本地数据库/PWA一句话总结IndexedDB 是浏览器端唯一能当“真正数据库”用的方案。 总结IndexedDB 并不难但坑点主要来自异步回调层层嵌套API 事件风格“复古”查询逻辑需要理解索引和游标但一旦掌握IndexedDB 是前端提升性能、支持离线能力的“终极武器”。建议提供封装方法如上代码或使用库如idb,Dexie.js作者: 王新焱博客: https://blog.csdn.net/qq_34402069时间: 2025年12月18日