HTML5本地存储之IndexedDB


Posted in HTML / CSS onJune 16, 2017

IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。

最近有一项业务需求,就是可以离线存储数据,等到有网络信号的时候可以上传表单和图片。所以研究了一下HTML5的IndexedDB。

对于只存储某些字段的需求来说,可以使用Local Storage和 Session Storage来完成。但是一旦存储大量的数据,Local Storage和 Session Storage就远远不能满足需求了。这时,IndexedDB的强大之处就会体现出来了。

1、创建或者打开数据库

/* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name:数据库名,version:数据库版本号

因为indexedDB在不同的浏览器上有兼容性,所以我们需要些一个兼容函数来兼容indexedDB。

2、连接到数据库的回调函数

request.addEventListener('success', function(event){ 
    // 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){ 
    // 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){ 
    // 更新数据库时执行
}, false);

在连接到数据库后,request会监听三种状态:

  • success:打开或创建数据库成功
  • error:打开或创建数据库失败
  • upgradeneeded:更新数据库

upgradeneeded状态是在indexedDB创建新的数据库时和indexeddb.open(name, version) version(数据库版本号)发生变化时才能监听到此状态。当版本号不发生变化时,不会触发此状态。数据库的ObjectStore的创建、删除等都是在这个监听事件下执行的。

3、创建、删除ObjectStore

在indexedDB中,ObjectStore类似于数据库的表。

request.addEventListener('upgradeneeded', function(event){ 
    // 创建数据库实例
    const db = event.target.result;
    // 关闭数据库
    db.close();
    // 判断是否有ObjectStore
    db.objectStoreNames.contains(objectStoreName);
    // 删除ObjectStore
    db.deleteObjectStore(objectStoreName);
}, false);

可以用如下方法创建一个ObjectStore

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);

4、数据的增删改查

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);

数据库的增删改查:

// 添加数据,当关键字存在时数据不会添加
store.add(obj);
// 更新数据,当关键字存在时覆盖数据,不存在时会添加数据
store.put(obj);
// 删除数据,删除指定的关键字对应的数据
store.delete(value);
// 清除ObjectStore
store.clear();
// 查找数据,根据关键字查找指定的数据
const g = store.get(value);
g.addEventListener('success', function(event){
    // 异步查找后的回调函数
}, false);

按索引查找数据

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);

按索引的范围查找数据

const index = store.index(indexName);
const cursor = index.openCursor(range);
/**
 * range为null时,查找所有数据
 * range为指定值时,查找索引满足该条件的对应的数据
 * range为IDBKeyRange对象时,根据条件查找满足条件的指定范围的数据
 */
// 大于或大于等于 
range = IDBKeyRange.lowerBound(value, true)   // (value, +∞),>  value
range = IDBKeyRange.lowerBound(value, false)  // [value, +∞),>= value
// 小于或小于等于,isOpen:true,开区间;false,闭区间
range = IDBKeyRange.upperBound(value, isOpen)
// 大于或大于等于value1,小于或小于等于value2
IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)

最后,自己封装了一个indexedDB的库,可以参考一下:duan602728596/IndexedDB

以上所述是小编给大家介绍的HTML5本地存储之IndexedDB,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 #HTML / CSS
Html5实现文件异步上传功能
May 19 #HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 #HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 #HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 #HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 #HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 #HTML / CSS
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
原生javascript实现解析XML文档与字符串
2016/03/01 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
python检查指定文件是否存在的方法
2015/07/06 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python with (as)语句实例详解
2020/02/04 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
名人演讲稿范文
2013/12/28 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
市场策划求职信
2014/08/07 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
驳回起诉裁定书
2015/05/19 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android