java indexeddb_初探IndexedDB
背景
随着前端技术日新月异地快速发展,web应用功能和体验也逐渐发展到可以和原生应用媲美的程度,前端缓存技术的应用对这起到了不可磨灭的贡献,因此想一探前端的缓存技术,这篇文章主要会介绍在日常开发中比较少接触的IndexedDB
IndexedDB
什么是IndexedDB
IndexedDB简单理解就是前端数据库,提供了一种在用户浏览器中持久存储数据的方法,但是和前端关系型数据不同的是,IndexedDB采用的key-value键值对存储,这种存储形式的数据库查询更简单快速,IndexedDB分别为同步和异步访问提供了单独的API,但是同步API仅提供在web worker内部使用,因此绝大多数情况,我们使用的都是异步API,同时IndexedDB也无法突破同源策略的限制,只能访问在同域下的数据
为什么要用IndexedDB
提到为什么要用IndexedDB就不得不提到我们经常用的缓存API localStorage和sessionStorage,这两个缓存API能满足我们开发时的绝大多数需求,简单的键值存储,但是它们有它们的限制:
存储空间限制,只有5M
只能存储字符串,存储对象类型的数据要用JSON.stringify和parse两个方法转换
存储的字段一多就很难管理,存储的字段也无法产生关联
IndexedDB的存储空间是没有限制,但是不同浏览器可能会对IndexedDB中单个库的大小进行一定的限制,IndexedDB本质上还是一个数据库,可以存储大量结构化数据(包括文件/blobs),同时IndexedDB API通过索引的方式实现了数据的高性能搜索
怎么用IndexedDB
前面介绍一堆IndexedDB相关的内容,接下来就来看看具体IndexedDB具体怎么使用,以一个简单的例子来切入,下面直接上具体代码:
var data = [{
id: 1,
name: 'Tom',
age: '18'
}, {
id: 2,
name: 'Tommy',
age: '16'
}]
// 打开数据库,两个参数(数据库名字,版本号),如果数据库不存在则创建一个新的库
var request = window.indexedDB.open('myDatabase', '1')
// 数据库操作过程中出错,则错误回调被触发
request.onerror = (event) => {
console.log(event)
}
// 数据库操作一切正常,所有操作后触发
request.onsuccess = (event) => {
var db = event.target.result
// 数据读取
var usersObjectStore = db.transaction('users').objectStore('users')
var userRequest = usersObjectStore.get(1)
userRequest.onsuccess = function (event) {
console.log(event.target.result)
}
}
// 创建一个新的数据库或者修改数据库版本号时触发
request.onupgradeneeded = (event) => {
var db = event.target.result
// 创建对象仓库用来存储数据,把id作为keyPath,keyPath必须保证不重复,相当于数据库的主键
var objectStore = db.createObjectStore('users', { keyPath: 'id'})
// 建立索引,name和age可能重复,因此unique设置为false
objectStore.createIndex('name', 'name', {unique: false})
objectStore.createIndex('age', 'age', {unique: false})
// 确保在插入数据前对象仓库已经建立
objectStore.transaction.oncomplete = () => {
// 将数据保存到数据仓库
var usersObjectStore = db.transaction('users', 'readwrite').objectStore('users')
data.forEach(data => {
usersObjectStore.add(data)
})
}
}
上面的例子介绍了IndexedDB的简单用法,当执行完上面的代码后可以在浏览器中看到自己新建的IndexedDB:
考虑到不是所有人都会将IndexedDB应用于实际工作,因此上面只是介绍了简单API的调用,更多关于IndexedDB的用法可以去MDN学习,真正需要使用的时候,对于其异步API调用如果不做一定的封装,一定会陷入深深的回调地狱,因此这里推荐两个IndexedDB API的封装库:
应用场景
相信这个话题应该是大部分人最感兴趣的,IndexedDB到底应用在什么地方?前面介绍了这么多,IndexedDB使用比localStorage、sessionStorage复杂得多,如果没有特定的使用场景,开发者一定不会自己给自己找麻烦选择IndexedDB做缓存,结下就来看看IndexedDB适用的场景:
不需要网络连接的纯离线应用,比如Todolist这类的用来记录待办任务类型的应用,
在不考虑需要联网的登录、分享功能下,待办事项、收件箱、任务核心功能完全可以用IndexedDB做数据库存储,配合Electron做一个桌面应用
需要存储大量数据的应用,比如图书管理系统这类的需要存储大量数据的应用,完全可以将图书信息存储在IndexedDB中
配和service worker构建pwa应用,用来缓存网络请求
总结
这篇文章简单介绍了IndexedDB的相关内容,总的来说,IndexedDB的应用频率并不高,这是由于IndexedDB适用复杂度和不多的适用场景决定的,因此这里也只是对它做了简单介绍,希望看了这篇文章后,能对IndexedDB有个简单的了解,在需要使用的时候能有个印象。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞
java indexeddb_初探IndexedDB相关推荐
- Java AIO初探(异步网络IO)
Java AIO初探(异步网络IO) 原文: http://www.blogjava.net/killme2008/archive/2009/09/20/295743.html 按照<Unix网 ...
- java并发初探ConcurrentSkipListMap
java并发初探ConcurrentSkipListMap ConcurrentSkipListMap以调表这种数据结构以空间换时间获得效率,通过volatile和CAS操作保证线程安全,而且它保证了 ...
- java并发初探ConcurrentHashMap
java并发初探ConcurrentHashMap Doug Lea在java并发上创造了不可磨灭的功劳,ConcurrentHashMap体现这位大师的非凡能力. 1.8中ConcurrentHas ...
- java并发初探ThreadPoolExecutor拒绝策略
java并发初探ThreadPoolExecutor拒绝策略 ThreadPoolExecuter构造器 corePoolSize是核心线程池,就是常驻线程池数量: maximumPoolSize是最 ...
- java并发初探CyclicBarrier
java并发初探CyclicBarrier CyclicBarrier的作用 CyclicBarrier,"循环屏障"的作用就是一系列的线程等待直至达到屏障的"瓶颈点&q ...
- java并发初探CountDownLatch
java并发初探CountDownLatch CountDownLatch是同步工具类能够允许一个或者多个线程等待直到其他线程完成操作. 当前前程A调用CountDownLatch的await方法进入 ...
- java并发初探ReentrantWriteReadLock
java并发初探ReentrantWriteReadLock ReenWriteReadLock类的优秀博客 ReentrantReadWriteLock读写锁详解 Java多线程系列--" ...
- java indexeddb_HTML5之IndexedDB使用详解
随着firefox4正式版的推出,IndexedDB正式进入我们的视线.IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NOSQL数据库.相较之下,WebDataBase标 ...
- JAVA设计模式初探之——装饰者模式
2019独角兽企业重金招聘Python工程师标准>>> 这个模式花费了挺长时间,开始有点难理解,其实就是 定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorat ...
最新文章
- Linux环境编译qtmqtt,qtmqttclient
- 【多重数组降维的简单方法】
- Android Activity和Intent机制学习笔记
- superset可视化-deck.gl Scatterplot与MapBox
- Redhat Mongodb学习笔记
- 先天性异常或智力残疾儿童患者的外显子组和基因组测序:美国医学遗传学与基因组学学院循证临床指南...
- cocos creator粒子不变色_隐秘的物理粒子系统与渲染 !Cocos Creator LiquidFun !
- Must-read papers on deep learning to hash
- python编程入门-Python编程入门电子书教程,看这几个就够了
- 通俗易懂的MonteCarlo积分方法(七)
- ssm教师教学评价系统(ssm教学评价系统教师ssm学生评教系统)JSP网上评教系统jsp评教系统
- 闭环控制 matlab仿真,反馈闭环控制系统Simulink仿真(带电流补偿的电压内环,直流调速)...
- indesign怎么拼图_用R来拼图和排版,告别AI和PS(二):调节宽度和高度
- 计算机xp怎么做备份,xp系统如何备份系统呢,详细教您如何备份
- pyecharts学习笔记
- 【Linux】常用命令:网络、内存、cron 超详细介绍
- 智能座舱开启「万物交互」新革命,隐形冠军们如何突围?
- 非常精妙的主副电源自动切换电路,并且“零”压降
- av_dump_format函数使用说明
- Selenium基础 — 拓展:使用浏览器加载项配置实现用户免登陆
热门文章
- 需要类型转换时请为模板定义非成员函数——条款46
- android每天定时打卡,钉钉定时打卡脚本下载|叉叉助手钉钉定时打卡插件安卓版下载 v4.3.1 - 跑跑车安卓网...
- ikigai人生四叶草模型:找到你的甜蜜点
- 【转载】又1个教程--简明批处理教程
- matlab中几种求积分的方法
- 【记录】一个深度学习算法工程师的成长之路(思考和方法以及计划)
- 【IT实施培训那些事儿】
- Python爬虫-openlaw登陆JS加密破解
- 灵魂筹码一直显示连接服务器,灵魂筹码进不去怎么办_灵魂筹码进入显示错误解决方法_3DM单机...
- PC:各大主板开机启动项快捷键