谈谈html5存储之IndexdDB
IndexdDB简介
html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库;且具有丰富的查询能力。
新建一个IndexdDB数据库
IDBOpenDBRequest定义有几个重要的属性:
- onerror:新建或打开数据库失败的回调
- onsuccess:新建或打开数据库成功的回调
- onupgradeneeded:新建或打开数据库版本发生变化时触发的回调
以上的几个API均是异步执行,所以我们在它们的回调函数中处理我们需要的数据。
function createIndexDB(dbName,version) {//根据数据库名称和数据库版本号来打开或者新建一个数据库
var version = version || 1;
var request = window.indexedDB.open(dbName,version);
request.onerror = function(e) { //新建或打开数据失败的回调函数
console.log(e);
}; request.onsuccess = function(e) { //新建或打开数据库成功的回调
mydb.db = e.target.result; // 把result赋值给对象属性
}; //初始化object store 也可以//删除object store
request.onupgradeneeded = function(e){
var db = e.target.result;
if(!db.objectStoreNames.contains('Employees')) { //是否包含员工这个对象
//db.createObjectStore('Employees',{keyPath:'id'}); // keyPath 指定对象的哪个属性作为主键
//db.createObjectStore('Employees',{autoIncrement:true}); //keyGenerate 主键自增长 ,任意值,
var store = db.createObjectStore('Employees',{keyPath:'id'}); // 同时返回一个store
store.createIndex('nameIndex','name',{unique:true}); //创建name的索引
store.createIndex('ageIndex','age',{unique:true});//创建age的索引
}
/*//删除object store
if(db.objectStoreNames.contains('Employees')) { //先查询是否存在
db.deleteObjectStore('Employees');
}*/ console.log("db version change to" + version);
}; }
新建数据库成功:
初始化一些数据:
var mydb = {
name:'firstDB',
version:1, //只能是整数,3.31--->会转成3
db:null
};
// employee数据
var Employee= [{
id:'lx001',
name:'lucas',
age:20
},
{
id:'lx002',
name:'lucy',
age:18
},
{
id:'lx003',
name:'mike',
age:22
},
{
id:'lx004',
name:'susan',
age:21
}
];
添加数据Create:
//添加数据
function addData(db,storename){
var transaction = db.transaction(storename,"readwrite");//首先获取事务
var store = transaction.objectStore(storename);//根据事务获取对应的storename获取我们新建数据库的store
for(var i = 0; i < employee.length; i++) {//遍历我们的数据
store.add(employee[i]);//add到store中
}
}
调用addData函数添加数据:addData(mydb.db, 'Employee')
成功添加数据;
indexdDB中事务
数据库都会有事务操作,indexdDB中根据数据库名字即read/write来获取事务,如添加数据库第一句代码。事务中要指定需要的object store;同时事务中具有3中模式:
- read:只读,不可修改数据库可以并发执行;
- readwrite:读写,可以修改数据库;
- verionchange:数据库版本变更
indexdDB中的主键,索引,游标
主键:在新建数据库的时候指定数据的某个字段作为主键且该字段具有唯一性;如本文中就指定了id作为了主键(keyPath)。同时也可以使用自动增长数字作为键值(keyGenerator);同时也可以不指定。
索引:索引页是数据库中高效查询的一种方法;同时indexdDB也提供了创建索引的功能;如上新建数据库的时候我们就顺便创建了两个索引(nameIndex/ageIndex)。创建索引需要3个参数:索引名称,创建索引的字段,索引属性是否唯一;
游标:有了索引没有游标索引岂不是很寂寞,indexdDB同时也提供了创建游标的方法;我们可以使用游标来遍历object store了;
下面是创建游标:
//使用游标来获取值,结合索引
function getDataByFetch(db, storename,indexType, indexName) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var index = store.index(indexType); //
var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标,得到一个请求;store打开的是哪个类型的索引,only中就是哪个索引的值
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
console.log(cursor.key)
var e = cursor.value;
console.log(e);
cursor.continue(); //游标下一位,没有会返回undefined
}
}
}
游标创建完成;
平常数据库中常常使用的CRUD,indexdDB也提供了相应的方法;上面已经介绍了添加数据
查询数据 Retrieve:
//根据id获取数据
function getDataByKey(db,storename,id){
var transaction = db.transaction(storename,'readwrite');//先获取事务
var store = transaction.objectStore(storename);//获取object store
var req = store.get(id); // 根据指定的keyPath的值查询 即id值
req.onsuccess = function(e) {
var employee = e.target.result;
console.log(employee.name);
}
}
//利用索引来获取值
function getDataByIndex(db,storename,indexType, indexName) {
var transaction = db.transaction(storename);//根据storename获取事务
var store = transaction.objectStore(storename); //storename为参数用事务获取store
var index = store.index(indexType);//使用index方法获取IDBIndex对象
index.get(indexName).onsuccess = function(e) {
var e = e.target.result;
console.log(e);
}
} //同时也可以使用游标来获取值,结合索引
function getDataByFetch(db, storename,indexType, indexName) {
var transaction = db.transaction(storename);
var store = transaction.objectStore(storename);
var index = store.index(indexType); //
var request = index.openCursor(IDBKeyRange.only(indexName)); //打开游标,得到一个请求;store打开的是哪个类型的索引,only中就是哪个索引的值
request.onsuccess = function(e) {
var cursor = e.target.result;
if(cursor) {
console.log(cursor.key)
var e = cursor.value;
console.log(e);
cursor.continue(); //游标下一位,没有会返回undefined
}
}
}
查询结果:
更新数据 update:
// 更新数据
function updateData(db, storename, id){
var transaction = db.transaction(storename, 'readwrite'); //获取事务
var store = transaction.objectStore(storename);// 得到指定的object store
var req = store.get(id);//根据id查找指定的对象
req.onsuccess = function(e) {
var employee = e.target.result;//得到对象
employee.age = 19;//修改值
store.put(employee);//将修改之后的值放回指定的object store中
};
}
删除数据 delete:
// 根据id删除指定数据
function deleteData(db, storename, id){
var transaction = db.transaction(storename, 'readwrite');//获取事务
var store = transaction.objectStore(storename); // 得到对应的object store
store.delete(id);// 根据id删除对应store中的数据
}
清空object store
//清空object store
function clearStore(db, storename) {
var transaction = db.transaction(storename,'readwrite'); // 首先获取事务
var store = transaction.objectStore(storename); //其次得到指定的object store
store.clear(); // store调用clear方法
}
怎么样, 是不是觉得indexdDB很强大呢?以上都是自己的一些个人学习收获,如有不对的地方欢迎大家批评指正。谢谢!
谈谈html5存储之IndexdDB的更多相关文章
- html5存储相关 coookie localstorage session storage
html5存储 coookie localstorage session storage
- HTML5存储方式
由于之前在参加面试或者笔试的过程中经常会被问到HTML5存储的内容,包括它们之间的区别.特征和应用范围,所以看到一篇介绍不错的文章,把里面的个人觉得适合我的内容按照自己的理解总结如下.方便以后忘记了进 ...
- html5存储方式localstorage和sessionStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- 【javascript】谈谈HTML5 ——HTML兽进化, H5兽!
作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王>中的 ...
- 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王> ...
- HTML5存储--离线存储
离线存储技术 HTML5提出了两大离线存储技术:localstorage与Application Cache,两者各有应用场景:传统还有离线存储技术为Cookie. 经过实践我们认为localstor ...
- HTML5存储(带一个粗糙的打怪小游戏案例)
本地存储localStorage设置存储内容setItem(key,value) localStorage.setItem('leo','23'); 更新存储内容对象[key]=value对象.key ...
- HTML5存储
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...
随机推荐
- HTML5 头部标签定义
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- 【SIGGRAPH】【最终幻想XV】的战斗场景实时演示的要点解说
[SIGGRAPH][最终幻想XV]的战斗场景实时演示的要点解说 原文:西川善司 http://www.4gamer.net/games/999/G999902/20160730004/ ...
- 精简的javascript下throttle和debounce代码
//频率控制 函数连续调用时,fn 执行频率限定为 1次/waitMs.立即执行1次 function throttle(fn, waitMs) { var lastRun = 0; return f ...
- iOS开发UI篇—iPad和iPhone开发的比较
一.iPad简介 1.什么是iPad 一款苹果公司于2010年发布的平板电脑 定位介于苹果的智能手机iPhone和笔记本电脑产品之间 跟iPhone一样,搭载的是iOS操作系统 2.iPad的市场情况 ...
- 给inpu加背景图,input内容又不能盖着背景图
问题: 根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图), 图中,java人员使用插件省市区三级联动,需要i ...
- linux后台查看共享内存和消息队列的命令
ipcs ipcs -q : 显示所有的消息队列 ipcs -qt : 显示消息队列的创建时间,发送和接收最后一条消息的时间 ipcs -qp: 显示往消息队列中放消息和从消息队列中取消息的进程ID ...
- struts2项目启动报错。关于jar的问题
严重: Exception starting filter struts2 Unable to load configuration. - bean - jar:file:/D:/apache-tom ...
- Oracle to_char 转换数值
SQL> Select CONCAT(TO_CHAR('0.001'*100,'990.99'),'%') FROM DUAL; CONCAT(TO_CHAR(' --------------- ...
- javascript 逻辑操作符
JS按位与(&) 0001 & 0011 --- 0001 只有两个数的值为1时,才返回1 JS按位异或 (^) 0101 (expression1) 1100 (expressi ...
- Contributing to the C++ Core Guidelines
Contributing to the C++ Core Guidelines "Within C++ is a smaller, simpler, safer language strug ...