前端 indexedDB的基本应用操作 创建库 增删改查

打开一个DB 类似打开或创建一个数据库

var request = indexedDB.open('student', 1);

第一个值为名称，第二个值为版本号 若无相应的数据库会自动创建
若版本号比创建时的版本高 则会触发更新

添加监听事件 onsuccess 打开成功 onerror 打开失败 onupgradeneeded 升级

request.onerror = function (event) {
	console.log('数据库打开报错');
};

request.onsuccess = function(event) {
	console.log('数据库打开成功');	
	var db = event.target.result;
	insert(db);//传值添加数据 
};

request.onupgradeneeded = function (event) {
	console.log('需要升级');
	var db = event.target.result;
	createTable(db);//创建仓库和索引传值		
}

创建数据仓库 (类似数据库中的表) 和索引

function createTable(db) {
	if (!db.objectStoreNames.contains('user')) {//判断表是否存在
		var store = db.createObjectStore('user', {
		keyPath: 'Id', //设置主键
		autoIncrement: true	//自增
});
						
	var idx = store.createIndex('user_list', 'Id', {unique: true});
	//创建索引 名称为userlist 主键为Id  不允许重复值
}
					
	console.log('创建仓库和索引成功'); 
}

主键（key）是默认建立索引的属性。比如，数据记录是{ id: 1, name: ‘张三’ }，那么id属性可以作为主键。主键也可以指定为下一层对象的属性，比如{ foo: { bar: ‘baz’ } }的foo.bar也可以指定为主键。
如果数据记录里面没有合适作为主键的属性，那么可以让 IndexedDB 自动生成主键。

indexedDb的数据类型

{id:1,name:'xiaohong'}
//也可以是json文件等
{
 "Id": 1001,
 "username": "张一",
 "sex": "男",
 "age": "18",
 "mobile": "18037382739"
}

对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。

向仓库中添加数据 add()

function insert(db){
	var tran = db.transaction(["user"], 'readwrite');
	var store = tran.objectStore('user');
	var value = {
	 	"Id": 1001,
	 	"username": "张一",
	 	"sex": "男",
		"age": "18",
	 	"mobile": "18037382739"
	};
	var req = store.add(value);
	req.onsuccess = function (event) {
		console.log('数据写入成功');
	};
	
	req.onerror = function (event) {
		console.log('数据写入失败');
	}
}

也可以用Jquery 异步获取json文件添加

function insert(db) {
	$.ajax({
		url: "data.json",
		dataType: "json",
		success: function(datas){
			var tran = db.transaction(["user"], 'readwrite');
			var store = tran.objectStore('user');
			var value = datas;
			var req = store.add(value);
			req.onsuccess = function (event) {
				console.log('数据写入成功');
  			};

			req.onerror = function (event) {
				console.log('数据写入失败');
			}
		}
	});
}

上面代码中先新建一个事务，必需指明 表名 和 操作模式 （只读或读写）
可以添加事件监控是否成功添加数据

读取数据 读取所有 getAll() 读取单个 get(主键)

//获取所有数据 getAll()
function selectAll(db){
     var tran = db.transaction(["user"]);
     var store = tran.objectStore('user');
     store.getAll().onsuccess = function(event){//从主表中按主键获取结果
     //store.index('user_list').getAll().onsuccess = function(event){ //从索引中按主键获取结果
         var result = event.target.result;
         for(var i in result){ //遍历结果
             console.log(result[i]['Id']);
             console.log(result[i]['username']);
             console.log(result[i]['sex']);
             console.log(result[i]['age']);
             console.log(result[i]['mobile']);
         }
     }
 }

//按主键获取数据 get(主键)
var tran = db.transaction(["user"]);
    var store = tran.objectStore('user');
    var test = store.get(1001);//从主表中获取主键为1001的学生信息
    //var test = store.index('user_list').get(1001);//从索引中获取主键为1001的学生信息
    test.onsuccess=function(event){ 
	    var student=event.target.result; 
	    console.log(student); 
 };

上面代码中 getAll读取全部数据，get()读取单个数据，参数是主键值
通过监控来确定读取成功或失败

更新数据 put()

function updata(db){
  var tran = db.transaction(["user"], 'readwrite');
  var store = tran.objectStore('user');
  var updata = store.put({Id:1001,username:"张一",sex:"男",age:"18",mobile:"12345678901"});
}
  //自动更新主键Id为1001的数据

put()会自动更新主键相同的整条数据 在索引中不能使用put() 只能在主表中使用

删除数据 delete()

function del(db){
   var tran = db.transaction(["user"], 'readwrite');
   var store = tran.objectStore('user');
   store.delete(1001);
   //删除主键 Id为1001的数据
}

delete()参数为主键