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

来源:xiaohongIT 发布时间:2019-03-28 14:04:33 阅读量:1262

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

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

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"});

}

  //自动更新主键Id1001的数据

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

 

 

 

删除数据 delete()

function del(db){

   var tran = db.transaction(["user"], 'readwrite');

   var store = tran.objectStore('user');

   store.delete(1001);

   //删除主键 Id1001的数据

}

delete()参数为主键

 


标签: PHP 环境搭建
分享:
评论:
你还没有登录,请先