在HTML 5中,新增一种被称为indexedDB的数据库,该数据库是一种存储在客户端本地的NoSQL数据库。

window.indexedDB=window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB;

window.IDBTransaction=window.IDBTransaction||wndow.webkitIDBTransaction||window.msIDBTransaction;

window.IDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyTRange;

window.IDBCursor=window.IDBCursor||window.webkitIDBCursor||window.msIDBCursor;

一、连接数据库

function connectionDatabase()

{

var dbName='IndexedDBTest';//数据名

var dbVersion=20120603;//版本号

var idb;

var dbConnect=indexedDB.Open(dbName,dbVersion);//连接数据库

dbConnect.onsuccess=function(e){

idb=e.target.result;//返回一个IDBDatabase对象,代表连接成功的数据库对象。

};

dbConnect.οnerrοr=function(){ alert('数据库连接失败')};

}

二、数据表

在使用indexedDB数据库的时候,所有对于数据的操作都在一个事务内部执行。

事务分三种:只读事务、读写事务与版本更新事务。

对于创建数据表与索引的操作,我们只能在版本更新事务内部进行。因为在IndexedDB API中不允许数据库中的表在同一版本发生变化,所以当我们创建或删除表时,必须使用新的版本号来更新数据库的版本,以避免重复修改数据库结构。

dbConnect.onupgradeneeded=function(e){idb=e.target.result;}

监听数据连接的请求对象的onupgradeneeded事件,当连接数据库时发现指定的版本号大于数据库当前版本号时触发该事件,当该事件被触发时一个数据库的版本更新事务已经开启,同时数据的版本号已经被自动更新完毕。

3.创建数据表

  var name='Users';//表名称

var optionalParameters={keyPath(主键值):'userId',autoIncrement(主键值是否自增):false}

var store=idb.createObjectStore(name,optionalParameters);//创建数据表

4.创建索引

IndexedDB数据库中的索引类似于关系型数据库中的索引,需要通过数据记录对象的某个属性值来创建。在IndexedDB数据库中,只能针对被设为索引的属性值进行检索,不能针对没有被设为索引的属性值进行检索。

var name='userNameIndex';//索引名称

var keyPath='userName';//表示记录中哪个属性创建索引

var optionalParameters={unique(唯一性):false(可以相同),multiEntry:false};

multiEntry:表示索引为一个数组,true:表示数组中的每一个元素都能作为索引,false:只能将整个数组的元素作为一个索引。

var idx=store.createIndex(name,keyPath,optionalParameters);//创建索引

5.事务

idb.transaction('数据表','事务模式{readnoly,readwrite}'); //开启事务

可以通过监听事务对象的oncomplet事件以及onabort事件并定义事件处理函数来定义事件结束或中止时所要执行的处理。

6.保存数据

var tx=idb.tansaction(['Users'],"readwrite");//开启事务

var store=tx.objectStore('Users');//objectStore方法获取事务对象的作用范围中的某个表。

var value={属性1:值,属性2:值,属性3:值};

var req=store.put(value);//put方法参数值为一个需要被保存到对象仓库中的对象。(异步执行)

      我们可以通过监听请求对象的onsuccess事件与onerror事件。判断值是否插入成功。

7.获取数据

store.get(Index);get方法使用一个参数,代表所获取数据的主键值。返回一个IDBReuqest对象。可以通过onsuccess事件和onerror事件来监听获取是否成功。在onsuccess事件中通过this.result.属性值获取数据。

还可以根据索引获取数据 store.index(index)方法。

get()一次只能获取一条数据。但是通过游标的指定可以一次获取多条数据。

var range=IDBKeyRange.bound(lower,upper,lowerOpen,upperOpen);//返回一个由一批数据的主键值组成的IDBKeyRange集合对象。参数一代表最小主键值、参数二代表最大主键值、参数三可选参数布尔型false时表示包含的参数中指定的最小主键值、参数四可选参数布尔型false时标示包含的参数中指定的最大主键值。三四参数默认为false。

var range=IDBKeyRange.lowerBound(lower,lowerOpen);//返回一个由一批数据的主键值组成的IDBKeyRange集合对象,这批数据中所有数据的主键值均大于等于方法参数中指定的主键值。参数二值是否包含lower值所指定的参数。

var range=IDBKeyRange.upperBound(upper,upperOpen);//同理

var direction="next";//指定游标的读取方向,next(主键值升序排列)|nextunique(升序,主键值相等时读取第一条数据)|prev(降序排序)|pervunique(参考升序)

var req=store.openCursor(range,direction);

返回IDBRequest对象,可以通过监听onsuccess事件及onerror事件处理返回数据。当找到合适的数据时,可以使用cursor.update方法、delete()、continue()、操作数据。

转载于:https://www.cnblogs.com/loadchow/p/6480099.html

HTML5 本地数据库IndexedDB数据库相关推荐

  1. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...

  2. HTML5本地存储——IndexedDB

    在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  3. HTML5本地存储IndexedDB基础使用

    做项目时需要用H5本地存储,感觉还不错 下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...

  4. html5 本地保存大数据库,HTML5本地储存 - jellydd的个人空间 - OSCHINA - 中文开源技术交流社区...

    传统方式我们用document.cookie来储存,但是储存大小较小,而且解析复杂,HTML5提出新的解决方案,使用sessionStorage和localStorage存储数据. localStor ...

  5. HTML5 进阶系列:indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  6. (九)HTML5本地存储——本地数据库SQLLite的使用

    在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地,从而大大提高了web应用程序额的性能,减轻了服务器端的负担,使web时代重新回到 ...

  7. html5 indexeddb 排序,HTML5 进阶系列:indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  8. Html5本地存储和本地数据库

    个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cookie ...

  9. 本地数据库IndexedDB - 学员管理系统之登录(一)

    IndexedDB是浏览器提供的本地数据库,它可以被网页脚本创建和操作.IndexedDB允许存储大量数据,提供查找接口,还能建立索引.这些都是LocalStorage或Cookie不具备的.就数据库 ...

最新文章

  1. c语言翻译成php,C语言如何把它翻译成中文
  2. Work measurement II
  3. mac mysql 初始密码_mac下mysql安装后修改默认密码
  4. 不重复地输出数(信息学奥赛一本通-T1245)
  5. 解释Linux进程的父子关系,Linux进程管理
  6. 19. 用 GTK+ 进行GNOME 编程,用 Qt进行KDE 编程
  7. 【Android】雾霾定位探测系统
  8. y的花式写法_26字母的花式写法可复制 也叫圆体字写法如下一基本规则
  9. 国内各大安卓市场有ASO优化吗?安卓应用市场aso优化
  10. 集团税务共享化、数字化系统如何选型(一)
  11. 故事系列之一:围棋世界里看天赋和勤奋
  12. codewars练习(javascript)-2021/3/14
  13. GIF动态表情图如何制作
  14. 基于人脸识别的web展示
  15. 【数据结构和算法】基础之素数
  16. 使用tcgames电脑玩手机游戏助手时卡顿延迟问题解决方案
  17. Abbkine 彩色预染蛋白质Marker (10-180 kDa)方案
  18. 假设一个公司的医疗保健数据库有如下 3 个关系: 职工(职工号,姓名,性别,职务,家庭地址,部门编号) 部门(部门编号,部门名称,办公地址,电话) 保健(保健卡编号,职工号,检查身体日期,健
  19. 让更多人用到自己的代码,让信仰在风中飘扬
  20. App内购项目的App Store推广

热门文章

  1. Xcode使用正则表达式替换
  2. GraphQL 进阶: 基于Websocket的实时Web应用开发
  3. [转载]交换机背板带宽计算方法
  4. kamctl start
  5. Exchange 2013部署系列之(五)NLB负载均衡
  6. KOFLive Beta 下载情况及用户反馈
  7. 转:要么学习,要么走人!直面竞争的30条生存原则
  8. TopCoder SRM 152 div 2 500point
  9. Kong APIGW — Plugins — Authentication
  10. Linux_Samba详解