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

先贴上两个参考链接:谷歌开发者社区IndexedDBjavascript标准参考教程

 

因为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。参考链接中都有。尽情研究,尽情玩耍吧!

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

 

你可能感兴趣的:(1.1)