IndexedDB：浏览器端数据库学习《一》

先贴上两个参考链接：谷歌开发者社区IndexedDB、javascript标准参考教程

 

因为IndexedDB现在还处于实验阶段，API不是很丰富的同时，各个浏览器的支持也不尽相同。笔者建议，在localStorge能满足需求的情况下，就没必要非要整IndexedDB了。笔者也只是闲来无事，瞎捯饬玩儿罢了。

 

详细的说明及概述这里就不啰嗦了。参考前面提供的两个链接。你会知道更多。

 

 

var conn=indexedDB.open('test');
var conn=indexedDB.open('test',1);//版本号必须是大于0的整数，默认为0

 数据库打开后，会触发四个事件

1. onupgradeneeded（数据第一次打开，或者数据库版本发生变化时触发）
2. onsuccess（连接成功时触发）
3. onerror（链接错误时触发）
4. blocked（上一次连接未关闭）、

这里只要说说第一个事件，因为要在这个事件里创建数据库中的“对象仓库“（就相当于，我们要在test数据库中创建表）。之所以要在这里创建。是因为IndexedDB中对数据库的操作（添加、删除“对象仓库”，创建索引等）都要在回调中执行。

 

conn.onupgradeneeded = function(e) {
		console.log("第一次打开该数据库，或者数据库版本发生变化。");
		var db=e.target.result;
		if(!db.objectStoreNames.contains("firstOS")) {
			
			db.createObjectStore("firstOS");//创建数据“firstOS”对象仓库
		}
		console.log('创建成功！firstOS')
}
		

 对象仓库创建成功后，开始往里面放数据吧。这次我们在onsuccess回调中开启事务，并添加数据

	open.onsuccess = function(e) {
		console.log("数据库打开成功!");
		db = e.target.result; 
		
		var t = db.transaction(["firstOS"],"readwrite");//同时设置访问类型为 读写
		t.onabort=function(e){
			console.log('事务中断！')
		}
		t.oncomplete=function(e){
		
			console.log('事务完成')
		}
		t.onerror=function(e){
			console.log('事务开启失败！')
			console.dir(e);
		}
			var store = t.objectStore("firstOS");
			
			
			var data={'p':123}
			
			var req=store.add(data,1);
			
			req.onerror=function(e){
				console.log('添加数据失败！')
			}
			req.onsuccess =function(e){
				console.log('数据添加成功！')
				
				var cursor=e.target.transaction.objectStore('firstOS').openCursor();
				cursor.onsuccess = function(e) {
				var res = e.target.result;
				if(res) {
					console.log("Key", res.key);
					console.log("Data", res.value);
					res.continue();
				}
			}
			}
		
		
		
	}

 至此，使用indexedDB添加数据就完成了。对于更新、删除等API。参考链接中都有。尽情研究，尽情玩耍吧！

 哦 对了。整个过程 我是在火狐浏览器整的。别的浏览器没试过。