一、IndexedDB的基本介绍
说到H5本地存储，得聊聊IndexedDB，它就像是个大仓库，啥都能装进去，找东西也快得很。想象一下，你的个人图书馆，只要知道书号，立马就能找到那本书。这种高效的数据管理方法，对那些需要大量数据存储和快速查找的网站来说，真是太有用了。
IndexedDB厉害在哪儿？除了基本的数据类型，还可以储存文件和Blob这类大东西！无论你想要保存文本、图片还是视频，IndexedDB都能搞定。有了这么全能的功能，比起只适合快速取用轻量级数据的LocalStorage和SessionStorage，IndexedDB在处理复杂数据结构上就显得更给力。
二、兼容性问题与解决方案
IndexedDB虽然挺棒，但是在各大浏览器里可能不兼容。简单来说，就像你去超市买东西，结果回家发现有的食物你家冰箱塞不下了。所以，我们得写点兼容性的代码，保证IndexedDB在各种浏览器上都能用。
这就是个神奇的适配器，任何品牌的家电插上它就能正常运作！这样子一搞，无论是哪种浏览器环境，IndexedDB都能稳如泰山，更不必担心用户体验受到兼容性问题的困扰哦～
三、与数据库的连接与升级
/* 对不同浏览器的indexedDB进行兼容 */ const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; /* 创建或连接数据库 */ const request = indexeddb.open(name, version); // name：数据库名，version：数据库版本号
用IndexedDB前要干啥？先创立或者开启个「账本」。这就跟开银行帐户一样，如果升级了版本，还要留意下那个叫”upgradeneeded”的东西。
你家的水龙头变高级了，得重新搭线才能用水。这时候，我们可以随便搞个对象存储（ObjectStore），或者干脆删了它就像图书馆里加减书架。这样，咱们想怎么调数据库就怎么调！
四、ObjectStore的创建与管理
request.addEventListener('success', function(event){
// 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){
// 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){
// 更新数据库时执行
}, false);
在IndexedDB里，ObjectStore就相当于咱们生活中的小书架，拿它存放平时用得到的资料。当你创建了一个ObjectStore以后，就像开始安排这个小书架的书籍摆放顺序那样，相应地把想要存入的数据放进这个小世界。这样一来，你便能非常方便且精准地掌控所有数据存放的位置以及方式！
删除ObjectStore，简单来说就像收拾一下不用的书架似的。千万别搞砸因为一删全没了，就好比你一不小心把书架丢了，书当然也跟着失踪。
五、数据的增删改查操作
在IndexedDB里，主要干的就是增删改查四件事，好比是往书架上添书还是把不要的书扔掉，又或是给书换个封面或更新下内容，最后就是找书，可以按名字或编号找到想要的那本书。
想要快点儿找到东西？就得找个类似图书馆的“目录”——索引。有了它，找数据就像翻书那么容易，使用起来当然更爽！
request.addEventListener('upgradeneeded', function(event){
// 创建数据库实例
const db = event.target.result;
// 关闭数据库
db.close();
// 判断是否有ObjectStore
db.objectStoreNames.contains(objectStoreName);
// 删除ObjectStore
db.deleteObjectStore(objectStoreName);
}, false);
六、实战案例分析
让我给大家举个例子，比如咱们做了一个没网也能填表、传照片的软件，用户编辑好之后，下次上网就能一键同步到服务器里！
你看，这不就是把IndexedDB当作咱们的备用数据中心，不管你在哪儿，数据存那儿，稳得很！等网络好了，再一股脑儿上传上去，数据一点儿没丢，还都是新的！
request.addEventListener('upgradeneeded', function(event){
// 创建数据库实例
const db = event.target.result;
// 判断是否有ObjectStore
if(!db.objectStoreNames.contains(objectStoreName)){
const store = db.createObjectStore(objectStoreName, {
keyPath: keyPath // keyPath 作为ObjectStore的搜索关键字
});
// 为ObjectStore创造索引
store.createIndex(name, // 索引
index, // 键值
{
unique: unique // 索引是否唯一
});
}
}, false);
七、自定义IndexedDB库的封装
为了让IndexedDB用起来简单点儿，提升研发速度，很多程序员会把这个功能打包成一个自家的库。这就像是做了个专属的图书管理系统，能更好地管理书和借阅信息。
request.addEventListener('success', function(event){
// 创建数据库实例
const db = event.target.result;
// 查找一个ObjectStore
db.transaction(objectStoreName, wa);
// wa为'readwrite'时，数据可以读写
// wa为'readonly'时，数据只读
const store = transaction.objectStore(objectStoreName);
}, false);
用好了封装好的库，你可以直接调用API来方便快捷地操作数据库，就像玩游戏一样。没那么复杂，代码更易懂，好维护。这样，你更多时间精力就花在业务上，而不是搞懂数据库那些深奥的东西！
八、总结与互动提问
// 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
// 异步查找后的回调函数
}, false);
看了文章后，你应该对IndexedDB有更深的认知！这个不只是个普通的存数据家伙，还是个牛逼的数据管理大师。因为它能存得快、找得快，所以在现在的网页应用里格外吃香。
问问你们哈：用INDEXEDDB时有没遇到什么难题？怎么把它们搞定的？快来评论区说说，咱们一块儿学，一块儿进步，推动Web技术更上一层楼。别忘了给文章点个赞，分享出去，让更多人知道INDEXEDDB，让它变成咱们的数据大仓库~
const index = store.index(indexName);
const cursor = index.openCursor(range);
cursor.addEventListener('success', function(event){
const result = event.target.result;
if(result){
result.value // 数据
result.continue(); // 迭代，游标下移
}
}, false);
评论0