IndexedDB的JS接口设计详解

接下来介绍IndexedDB(以下简称IDB)的JS接口设计

 

 

如图所示,我们按照操作过程,把IDB的接口分成三部分来介绍:

1.初始化数据库连接

2.在数据库中建表

3.在表中存取数据

初始化数据库连接

  1. var req = window.IndexedDB.open(dbName, dbVersion);  
  2. req.onsuccess = function (e) {...}  
  3. req.onupgradeneeded = function (e) {...}  
  4. req.onerror = function (e) {...} 

这里有两个重要的参数,dbName是数据库的名称,dbVersion是数据库的“版本”。第2个参数“版本”可能不太好理解,IDB不允许数据库中的表在同一个版本中发生变化,所以当我们创建新表或删除旧表的时候,必须使用一个不一样的版本号。他的作用在于避免重复修改数据库的表结构。默认的版本是空字符串””,我们在使用时,可以使用”1.0″。如果请求中的版本号和当前数据库的版本号相同,则会触发onsuccess事件,如果版本号不同,则会触发onupgradeneeded事件,我们在这一事件中可以对数据库的表结构进行修改,然后再触发onsuccess事件。

在数据库中建表

  1. req.onupgradeneeded = function (e) {  
  2.     var db = req.result;  
  3.     vardb.createObjectStore(storeName, optionParameters);  
  4. }; 

之前提到了,当被访问的数据库版本号需要发生改变时,onupgradeneeded事件会被触发,我们就从这个事件继续说起。通过req.result我们可以得到当前的数据库对象db。db有一个方法createObjectStore,是专门用来创建表的。***个参数是表的名称,第二个参数是可选的,它决定了我们要创建的表是内联关键字还是外部关键字,关键字是否需要自动生成,代表这两个设置的字段分别是keyPath和autoIncrement。比如,当第二个参数是

  1. {keyPath: 'profile.id', autoIncrement: false} 

时,说明这个表采用内联关键字,且keyPath是profile.id,同时关键字不是自增的,需要每次插入数据时手动设定;当第二个参数是

  1. {autoIncrement: true} 

时,说明这个表采用外部关键字,并且关键字是自增的。

同样的,我们可以在onupgradeneeded事件中删除一个表,方法是db.deleteObjectStore(storeName)。道理很简单,就不展开论述了。

在表中存取数据

  1. req.onsuccess = function (e) {  
  2.     var db = req.result;  
  3.     var transaction = db.transaction(storeNames, mode);  
  4.     var store = transaction.objectStore(storeName);  
  5.     var subReq = store.add(value, key);  
  6.     // var subReq = store.get(key);  
  7.     // var subReq = store.delete(key);  
  8.     // var subReq = store.clear();  
  9.     subReq.onsuccess = function (e) {  
  10.         console.log(subReq.result);  
  11.     };  
  12. }; 

对表中数据的存取通常是在onsuccess事件之后进行的。同样的,我们可以通过req.result获取数据库对象db,并随时通过db进行各种存取数据的操作。

上一篇文章提到了,所有的数据库操作都是在事务(transaction)中进行的,具体代码格式是这样的:

***句,先创建一个transaction,两个参数分别是会涉及到的表的名字和读写模式,表的名字可以是数据也可以是字符串,如”users”或[“users”, “articles”],读写模式可以是IDBTransaction.READ_ONLY或IDBTransaction.READ_WRITE。

第二句,用transaction对象获取一个表,需要传入的参数是表的名称。

第三句及其后面的四句注释掉的代码,分别是我们可以利用store这个对象进行的基本的表操作——添加数据、获取数据、删除数据、清空表。参数也都很好理解,有一个要注意的地方是,添加数据时,key是可选项,如果我们已经在表里定义了keyPath或表本身有自增关键字,则key是不需要写的。

***,如***篇文章所说,这些操作是异步进行的,想获得操作的结果,可以在subReq.onsuccess事件中,通过访问subReq.result获取操作结果。添加操作的操作结果是关键字,获取数据的操作结果是对象的值,删除操作和清空操作无需返回结果。

上述介绍是IDB的一些基本操作,我刻意省略掉了IDB中的遍历、索引以及对各种出错异常的处理。为的是给大家一个直观的印象,用了上面的接口,我们起码可以做到一件事,就是想使用localStorage一样通过键值对来存取json对象。

下一篇文章,会进一步介绍遍历操作,并结合firefox 10对IndexedDB的支持情况做一个简单的demo。

【系列文章】

  1. 浅析IndexedDB存数结构
  2. 调试IndexedDB应用程序

原文:http://bulaoge.net/topic.blg?dmn=g3g4&tid=2330716#Content

文章来源网络,作者:运维,如若转载,请注明出处:https://shuyeidc.com/wp/297243.html<

(0)
运维的头像运维
上一篇2025-05-22 09:25
下一篇 2025-05-22 09:26

相关推荐

  • 个人主题怎么制作?

    制作个人主题是一个将个人风格、兴趣或专业领域转化为视觉化或结构化内容的过程,无论是用于个人博客、作品集、社交媒体账号还是品牌形象,核心都是围绕“个人特色”展开,以下从定位、内容规划、视觉设计、技术实现四个维度,详细拆解制作个人主题的完整流程,明确主题定位:找到个人特色的核心主题定位是所有工作的起点,需要先回答……

    2025-11-20
    0
  • 社群营销管理关键是什么?

    社群营销的核心在于通过建立有温度、有价值、有归属感的社群,实现用户留存、转化和品牌传播,其管理需贯穿“目标定位-内容运营-用户互动-数据驱动-风险控制”全流程,以下从五个维度展开详细说明:明确社群定位与目标社群管理的首要任务是精准定位,需明确社群的核心价值(如行业交流、产品使用指导、兴趣分享等)、目标用户画像……

    2025-11-20
    0
  • 香港公司网站备案需要什么材料?

    香港公司进行网站备案是一个涉及多部门协调、流程相对严谨的过程,尤其需兼顾中国内地与香港两地的监管要求,由于香港公司注册地与中国内地不同,其网站若主要服务内地用户或使用内地服务器,需根据服务器位置、网站内容性质等,选择对应的备案路径(如工信部ICP备案或公安备案),以下从备案主体资格、流程步骤、材料准备、注意事项……

    2025-11-20
    0
  • 如何企业上云推广

    企业上云已成为数字化转型的核心战略,但推广过程中需结合行业特性、企业痛点与市场需求,构建系统性、多维度的推广体系,以下从市场定位、策略设计、执行落地及效果优化四个维度,详细拆解企业上云推广的实践路径,精准定位:明确目标企业与核心价值企业上云并非“一刀切”的方案,需先锁定目标客户群体,提炼差异化价值主张,客户分层……

    2025-11-20
    0
  • PS设计搜索框的实用技巧有哪些?

    在PS中设计一个美观且功能性的搜索框需要结合创意构思、视觉设计和用户体验考量,以下从设计思路、制作步骤、细节优化及交互预览等方面详细说明,帮助打造符合需求的搜索框,设计前的规划明确使用场景:根据网站或APP的整体风格确定搜索框的调性,例如极简风适合细线条和纯色,科技感适合渐变和发光效果,电商类则可能需要突出搜索……

    2025-11-20
    0

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注