• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5 本地存储 IndexedDB 教程

JAVA web前端中文站 3年前 (2017-06-23) 1766次浏览 已收录 0个评论

HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序。此外,本地数据持久性使移动应用程序更灵敏,使用的带宽更少,而且能够在低带宽场景中更高效地工作。HTML5 提供了一些本地数据持久性选项。第一个选项是 localstorage,它支持您使用一个简单的键值对来存储数据。IndexedDB(一个更加强大的选项)支持您本地存储大量对象,并使用健壮的数据访问机制检索数据。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

IndexedDB API 取代了 Web Storage API,后者在 HTML5 规范中已不推荐使用。(但一些领先的浏览器仍然支持 Web Storage,其中包括苹果公司的 Safari 和 Opera Web 浏览器)与 Web Storage 相比,IndexedDB 具有多个优势,其中包括索引、事务处理和健壮的查询功能。本文将通过一系列的示例来展示如何管理 IndexedDB 数据库。

HTML5 本地存储 IndexedDB 教程

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

创建或连接数据库

 IndexedDB(name, version, callbackObject = {});
  • name : 创建或者连接的数据库名
  • version : 数据库版本号
  • callbackObject: 配置回调函数

callbackObject 支持以下的回调函数配置:

  • success:创建或者连接的数据库成功后的回调函数
  • error:创建或者连接的数据库失败后的回调函数
  • upgradeneeded:数据库版本号更新后的回调函数
 /* 对不同浏览器的 indexedDB 进行兼容 */ 
 const indexeddb = window.indexedDB || window.webkitIndexedDB || 
 window.mozIndexedDB || window.msIndexedDB; 
 /* 创建或连接数据库 */ 
 const request = indexeddb.open(name, version);  
 // name:数据库名,version:数据库版本号
 IndexedDB(name, version, {     
 success: function(et){         
 const db = this.db; // 数据库实例     } });

连接到数据库的回调函数

 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 的创建、删除等都是在这个监听事件下执行的。

创建、删除 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);

数据的增删改查

 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.deleteDatabase(databaseName);

关闭数据库

 this.close(time);

判断是否有 ObjectStore

 this.hasObjectStore(objectStoreName);

创建 ObjectStore

 this.createObjectStore(objectStoreName, keyPath, indexArray);

indexArray(Array),里面的对象为(Object)

  • index: 索引
  • name: 键值

删除 ObjectStore

 this.deleteObjectStore(objectStoreName);

获取 ObjectStore

 this.getObjectStore(objectStoreName, writeAble = true);

举例如下:

 IndexedDB(name, version, {     
 success: function(){         
 const db = this.db;                                 
 // 数据库实例         
 const store = this.getObjectStore(objectStoreName); 
 // ObjectStore 实例} });

添加数据

 store.add(obj);

Object 或 Array,下同。

修改数据

 store.put(obj);

删除数据

 store.delete(value);

String、Number 或 Array。

查找数据

 store.get(key, callback);

callback 回调函数。回调参数为 result。

清除 ObjectStore

 store.clear();

游标

 store.cursor(indexName, [range,] callback);

range 用来选择范围。
根据字符串返回游标查询的范围,例如:

  • ‘5’ 等于
  • ‘> 5’ 大于
  • ‘>= 5’ 大于等于
  • ‘< 5’ 小于
  • ‘<= 5’ 小于等于
  • ‘[5, 8]’ 闭区间
  • ‘(5, 8)’ 开区间

callback 回调函数。回调参数为 result,result.value 为获取的数据,result.continue()迭代。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 本地存储 IndexedDB 教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址