发布indexedDB操作组件,让indexedDB操作草鸡简单

广告位招租
扫码页面底部二维码联系

周末趁没事,就把之前写的一个包重新写了一【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。遍。这个包的作用是为开发者提供更加快捷的原创内容,盗版必究。【本文受版权保护】indexedDB操作,免除一切烦恼,开著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】箱就用起来。indexedDB是web标本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】准,被大部分现代浏览器完整支持。和loc转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netalStorage不同的是,indexe著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】dDB是真的完整存储js对象的引擎,它甚著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】至支持存储new Date()的值,其他未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net一些基础的js对象类型也可能是支持的。而【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】localStorage是只能存储字符串【版权所有】唐霜 www.tangshuang.net【作者:唐霜】的,要存储对象,必须通过JSON等进行序【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。列化,而JSON不支持循环嵌套。另外一点【本文受版权保护】本文作者:唐霜,转载请注明出处。就是,localStorage是同步的,【版权所有】唐霜 www.tangshuang.net【作者:唐霜】indexedDB是异步的。

【作者:唐霜】本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。【原创不易,请尊重版权】

基于对复杂的indexedDB原生接口进【版权所有,侵权必究】原创内容,盗版必究。行封装的思路,我发布了hello-ind【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】exeddb这个包,可以通过下面这个命令未经授权,禁止复制转载。【转载请注明来源】安装

本文版权归作者所有,未经授权不得转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】
npm install --save hello-indexeddb

完整的文档在github上,【版权所有】唐霜 www.tangshuang.net可以点击这里阅读【作者:唐霜】。都是key-value数据库,它和lo原创内容,盗版必究。【本文首发于唐霜的博客】calStorage的本质区别在哪里呢?原创内容,盗版必究。【版权所有,侵权必究】我认为数据库的本质能力是分层检索能力。检【转载请注明来源】本文版权归作者所有,未经授权不得转载。索能力对于localStorage简直就本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。是无,它只能通过一个key得到一个val【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netue,而且是字符串的。而indexedD本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。B可以通过创建索引进行检索,查询某个ob未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】ject的时候,可以通过主键快速get,转载请注明出处:www.tangshuang.net【转载请注明来源】也可以通过索引来快速query,这里的索本文作者:唐霜,转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】引在代码层面就是一个被记录的object【作者:唐霜】【未经授权禁止转载】的属性。这看上去好像也没什么,比如我可以【本文受版权保护】原创内容,盗版必究。通过构造多种变形的key来保存local【本文首发于唐霜的博客】未经授权,禁止复制转载。Storage,然后自己封装一套检索方法本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。来进行查询,甚至我自己构建一套local转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。Storage的索引来快速查询。这当然是【作者:唐霜】【转载请注明来源】可以的,从这点上来讲,indexedDB【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】甚至没有localStorage有优势,原创内容,盗版必究。【转载请注明来源】因为localStorage是同步的,更【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】直观,而且不会出现事件循环错误,也就不需【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。要事务机制。但是同步有同步的坏处,那就是【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】阻塞页面进程。

【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】

读完stackoverflow上的【访问 www.tangshuang.net 获取更多精彩内容】这个讨论【作者:唐霜】后我更加确信localStorage是有转载请注明出处:www.tangshuang.net【转载请注明来源】局限的,也就是说,它真的真的仅仅适合那些【本文首发于唐霜的博客】【关注微信公众号:wwwtangshuangnet】非常小、碎片化的数据存储,而indexe未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。dDB才是完整的长久存储数据的解决方案。本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。这也就是说,在一个web应用中,应该合理【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net的选择使用localStorage还是i【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】ndexedDB。大家之所以那么青睐使用【本文首发于唐霜的博客】原创内容,盗版必究。localSotrage,最大的原因莫过著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】于它的接口太过简单了。不过想要让inde【本文受版权保护】著作权归作者所有,禁止商业用途转载。xedDB变得简单也非常容易,就是使用我转载请注明出处:www.tangshuang.net原创内容,盗版必究。上面的包。你甚至可以这么用:

【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】
async function() {
let idb = new HelloIndexedDB({ key: 'key' })
await idb.put({ key: 'my_key', value: 'my_value' })
let obj = await idb.get('my_key')
}

就是这么简单,跟localStorage转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】相比,就是异步和同步的区别。在对put这原创内容,盗版必究。本文作者:唐霜,转载请注明出处。个操作的适合,转换一下localStor【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。age里面的set操作的思维,然后,就非【作者:唐霜】【版权所有】唐霜 www.tangshuang.net常自然的切换到了indexedDB的怀抱本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。里面。要知道,get回来的,是一个拥有上【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net下文的真实的js对象,而非字符串序列化和本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。反序列化的结果。

本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net

就这样,拥抱indexedDB吧~【访问 www.tangshuang.net 获取更多精彩内容】

著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文作者:唐霜,转载请注明出处。【关注微信公众号:wwwtangshuangnet】