IndexedDB学习记录

开发的项目中把历史记录用txt存到阿里云了，后台读取后只是一堆键值对，而且是很多，对于做分页不太好用，我就想到用前端的IndexedDB（其实是后端那个货听说前端可以用数据库就硬让我弄的）；没办法啦，只能学学了，下面是我学习的一些知识，主要是为了存下我的学习的知识，方便后期回忆，有什么不对的地方欢迎留言，有技术交流也可以留言！哈哈。。。。

先来上一段简单的demo代码(看之前最好有一些数据库方面的知识，更容易看懂)：

		if('indexedDB' in window) {
			// 支持
			console.log('支持indexedDB');
			// 数据库数据结果
			var db;
			// 打开数据库
			var DBOpenRequest = window.indexedDB.open('project', 1);//创建或打开一个叫project的数据库
			// 数据库打开成功后
			DBOpenRequest.onsuccess = function(event) {        
			    // 存储数据结果
			    db = DBOpenRequest.result;
			    // 做其他事情...
			    // 新建一个事务
				var transaction = db.transaction('project', "readwrite");//这里的project是指表名
				// 打开存储对象
				var objectStore = transaction.objectStore('project');//这里的project是指表名
				// 添加到数据对象中，以后可以通过for循环来把你要存储的大数据一条一条存储到数据库里
				var newItem={
				  "name": "德玛西亚",
				  "begin": "2018-06-09",
				  "end": "2057-07-16",
				  "person": '盖伦',
				  "remark": "我的大刀已饥渴难耐"
				}
				objectStore.add(newItem);//将数据添加到数据中
//				获取数据
				var keyRangeValue = IDBKeyRange.bound(2, 6);//这个是在分页的时候处理，选择要读取的条数，包前又包后
				var cursor = objectStore.openCursor(keyRangeValue );//如果不分页，读取全部，就把openCursor()中的参数去掉即可
				cursor.onsuccess=function(e){
				    var res = e.target.result;
				    if(res) {
//				    	如果没有便利完毕继续便利
				        console.log("Key", res.key);//这是主键
				        console.dir("Data", res.value);//这是数据键值对，也就是那一条数据
				        res.continue();
				    }else{
				    	//如果遍历完毕
				    }
				}
			};
			
			// 下面事情执行于：数据库首次创建版本，或者window.indexedDB.open传递的新版本（版本数值要比现在的高）
			DBOpenRequest.onupgradeneeded = function(event) {
			    // 通常对主键，字段等进行重定义
		        var db = event.target.result;
			    // 创建一个数据库存储对象，也就是数据库中的表，表名叫project
			    var objectStore = db.createObjectStore('project', {
			        keyPath: 'id',
			        autoIncrement: true
			    });
			
			    // 定义存储对象的数据项
			    objectStore.createIndex('id', 'id', {
			        unique: true    
			    });//true代表不能重复
			    //建立一些数据库表的字段
			    objectStore.createIndex('name', 'name');
			    objectStore.createIndex('begin', 'begin');
			    objectStore.createIndex('end', 'end');
			    objectStore.createIndex('person', 'person');
			    objectStore.createIndex('remark', 'remark');
			};
		} else {
			// 不支持
		}

关于IndexedDB的兼容性，他已经很好的兼容的主流的浏览器，IE10、Edge、Google、Opera、Safari、Firefox都支持这个，如果你的项目不用考虑IE低版本的，而且需要存储的数据量很大，你完全可以考虑这个。不过移动端好像只有Firefox支持。

关于存储量的大小（下面那句话是我从别的网站扣得！哈哈）。IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox 则没有上限。

下面那两个网站是我参考的网站，你们也可以参考一下：

IndexedDB：浏览器端数据库

HTML5 indexedDB前端本地存储数据库实例教程