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自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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 高手之路(二)
2006/10/09 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python如何判断数独是否合法
2016/09/08 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python shelve模块实现解析
2019/08/28 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
音乐学专业求职信
2014/07/22 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis