前端本地化存储神器——IndexedDB的深度解析

“兄弟们，今天咱们聊聊浏览器里的’小仓库’——本地存储！这玩意儿就像你家的储物间，东西放哪儿、放多少，都是学问！”

浏览器存储四兄弟大比拼

想象一下，我们的浏览器就是个大型超市，而这四位就是不同规格的货架：

什么是IndexedDB？

官方定义：

IndexedDB 是浏览器提供的低级API，用于客户端存储大量结构化数据（包括文件、图片、二进制数据等），使用索引实现高性能搜索。

码仔翻译版：

“说人话就是——浏览器里自带的迷你数据库，能存海量数据，还贼快”。

1. 打开数据

const req = indexedDB.open(‘我的数据库’, 1);

req.onsuccess = (e) => { const db = e.target.result; console.log(‘✅ 打开成功！’); };

req.onupgradeneeded = (e) => { e.target.result.createObjectStore(‘用户表’, { keyPath: ‘id’, autoIncrement: true }); };

2. 增删改查四件套

增加

db.transaction([‘用户表’], ‘readwrite’).objectStore(‘用户表’).add({ name: ‘码仔’, age: 25 });

查询

db.transaction([‘用户表’], ‘readonly’).objectStore(‘用户表’).get(1).onsuccess = (e) => console.log(e.target.result);

更新

db.transaction([‘用户表’], ‘readwrite’).objectStore(‘用户表’).put({ id: 1, name: ‘码仔同学’, age: 26 });

删除

db.transaction([‘用户表’], ‘readwrite’).objectStore(‘用户表’).delete(1);

选存储技术就像选工具：

●存个开关状态？→ localStorage

●存个临时标记？→ sessionStorage

●存个登录凭证？→ Cookie

●存一堆数据？→ IndexedDB

记不住？那就记住：小数据用localS，大数据就用IndexedDB

杀手锏1：超大容量

localStorage: “大哥，我只能存10MB，再多就爆了！”

IndexedDB: “小老弟，让开！几百MB到几个GB，我全包了！”

实际场景：

• 离线相册：缓存用户上传的图片

• 文件管理器：保存文档、PDF、视频

• 数据分析：存储大量日志和埋点数据

• 游戏存档：保存游戏进度和资源

杀手锏2：异步操作

同步操作: “等我一下…页面卡死了！”

异步操作: “你先玩，我在后台慢慢处理~”

为什么异步很重要？

• 不会阻塞UI，页面丝滑流畅

• 适合处理大量数据

• 用户体验好到飞起

杀手锏3：原生支持复杂数据类型

// ❌ localStorage只能存字符串，需要转来转去

const user = { name: ‘码仔’, age: 25 };

localStorage.setItem(‘user’, JSON.stringify(user));

const loadedUser = JSON.parse(localStorage.getItem(‘user’));

// ✅ IndexedDB直接存对象，支持各种复杂类型

const user = {

id: 1,

name: ‘码仔’,

aatar: new Blob([…]), // 二进制图片

hobbies: [‘coding’, ‘drawing’], // 数组

createdAt: new Date(), // 日期对象

metadata: { level: 10 } // 嵌套对象

};

// 直接存储，无需转换！

store.add(user);

吐槽总结：

“localStorage:’对象？先转成JSON！’

读取：‘JSON？再转回对象！’

IndexedDB：‘对象？直接扔过来！’

读取：‘给你，原封不动！’

省了多少事！”

杀手锏4：索引查询，快如闪电

遍历查找: “让我一个个找…10000条数据，累死我了！”

索引查询: “嗖~0.001秒就找到了！”

索引工作原理：

• 类似数据库的索引，建立数据的“目录”

• 查询时直接定位，不用遍历整个数据集

• 支持唯一索引、范围查询、多字段索引