IndexedDB是什么
HTML5的本地存储新秀IndexedDB，别急着学，咱得先了解下这货啥子来头～ IndexedDB可是个大容量的记忆力厉害手，电脑里不管多大多大的文件、blob，或者是繁琐复杂的文件，都能让你存得舒舒服服。至于Cookie和Local Storage啥的，那真是小菜鸟一枚。IndexedDB就像是个神速搜寻器，要什么立马给找出来，而且还不怕断网！就算没网了，也能暂时把数据存下来待到上网再上传，丝毫不影响事。
为什么选择IndexedDB
看这么多代码链头是不是有点晕？别慌，来看看 Local Storage 跟 Session Storage，它们能帮到你。确实有点复杂，但面对海量数据，是不是觉得有些无力？别怕，IndexedDB就在这儿等你！轻松建库，搞定 SQL，增删改查，全无问题，是不是正好符合你的胃口呀~
兼容性处理
别忘了加个兼容性的模块来搞定那些五花八门的浏览器，它还能帮忙解决IndexedDB的毛病。别小看了这东西，弄得好的话你的app会变得超好用！
创建或打开数据库
搞定IndexedDB？这可分两种情况，是要建立新的库还是只是开个新窗口？不用担心数据版本咋样，试试这种简单粗暴的方式——只要告诉我你想要给数据库起啥名，哪个版本对你心水即可。看，像这样， var db = indexedDB.open(“名字”,”值”)，简单几步操作，立马就大功告成了！
/* 对不同浏览器的indexedDB进行兼容 */ const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; /* 创建或连接数据库 */ const request = indexeddb.open(name, version); // name：数据库名，version：数据库版本号
连接到数据库的回调函数
网好了没？你看看咱们的进度条，银色证明搞定，黄色的话还得查查，有点混乱；要是变蓝了，那意思就是需要重新加载了，大概是网站换了新的仓库或者更新了版本。现在这段时间，你爱怎么搞就怎么搞，想加啥加啥，想删啥删啥，随便来就好！
request.addEventListener('success', function(event){
// 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){
// 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){
// 更新数据库时执行
}, false);
创建、删除ObjectStore
看到IndexedDB这部分没？这里的ObjectStore跟咱平时用的表格差不多。咱们就先造一个属于自己的ObjectStore吧（createObjectStore），取个好听点儿的名字。如果这货没用了，把它扔掉(deleteObjectStore)就可以咯。
数据的增删改查
搞定存好了？那就来磨练数据处理！新增添东西用put()，没用的拿delete()清除，想找啥直接Get()。要找部分内容，索引能帮助你迅速定位，或是看看它跟哪些区块有关系也不错。
事务管理
想要轻轻松松增删改查，还舍不得惹大麻烦？那就尽量避开这个交易处理！这样做能防止咱们在操作过程中产生纷争或别的恼火事儿。
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跑得风驰电掣?来，搞懂设置少做无谓动作，善用索引快速找数据。哦你会觉得系统飞起来了!
安全性考虑
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);
用IndexedDB时要小心点保护信息没那么难，加个密码，设定访问权限不都成。这下肯定能解决~
咱们来聊聊 HTML5 的 IndexedDB 这个本地存储神器！希望能帮到你！
// 添加数据，当关键字存在时数据不会添加
store.add(obj);
// 更新数据，当关键字存在时覆盖数据，不存在时会添加数据
store.put(obj);
// 删除数据，删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据，根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
// 异步查找后的回调函数
}, false);
。
评论0