您的位置:首页> HTML5教程> indexedDB

IDBObjectStore.put() 方法

2019-7-21 16:36| 作者: admin| 查看: 391| 评论: 0|来自: 蚂蚁部落

此方法可以更新对象仓库中指定主键的数据,一个异步操作。

返回值是一个返回值是IDBRequest对象。

语法结构:

[JavaScript] 纯文本查看 复制代码
let IDBRequest = objectStore.put(item, key);

语法解析:

(1).item:必需,新数据,用于更新原有数据。

(2).key:可选,将要更新数据的主键。

(3).IDBRequest:返回值是一个IDBRequest 类型对象,由此可见此方法是异步操作。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"张三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];
let request = window.indexedDB.open("antzone", 1);
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{keyPath:"id"});
    objectStore.createIndex("xingbie","sex",{ unique: false });
}
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  for(let i=0;i<students.length;i++){
    objectStore.add(students[i]);
  }
}
</script>
</head>
<body>
  <p>为对象仓库批量添加数据</p>
</body>
</html>

首先通过上述代码为数据库添加数据,下面基本以此为基础对put方法进行演示。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163657wuxw48oebc47cwb7.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面利用IDBObjectStore.put() 方法修改第二条数据,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"张三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];
let request = window.indexedDB.open("antzone", 1);
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{keyPath:"id"});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let putRequest = objectStore.put({id:1002, name:'蚂蚁部落', age:5, email:'ant@163.com'});
  putRequest.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  putRequest.onerror = function (event) {
    console.log('数据更新失败');
  }
}
</script>
</head>
<body>
  <p>indexedDB数据库批量增加数据</p>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163721wxcamfqgvczdvcfb.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通过IDBObjectStore.put()方法将数据仓库中的第二条数据更新,代码分析如下:

(1).上述代码中,put方法只需要一个方法即可确定要更新的数据。

(2).因为数据的主键通过keyPath规定,是內键,存储的数据内部包含。

(3).如果上述代码强行规定第二个参数为1002,那么会报错。

(4).通过返回值对象的success和error事件可以监听更新是否成功。

下面看一下添加第二个参数的情况,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"张三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];
let request = window.indexedDB.open("antzone", 1);
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{autoIncrement:true});
    objectStore.createIndex("xingbie","sex",{ unique: false });
}
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  for(let i=0;i<students.length;i++){
    objectStore.add(students[i]);
  }
}
</script>
</head>
<body>
  <p>为对象仓库批量添加数据</p>
</body>
</html>

还是批量添加数据,但是和第一段代码唯一不同点是,主键是自增长的。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163749yzbu5egllb9marjf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面通过IDBObjectStore.put()方法更新第二条数据,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"张三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];
let request = window.indexedDB.open("antzone", 1);
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{autoIncrement:true});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let putRequest = objectStore.put({id:1002, name:'蚂蚁部落', age:5, email:'ant@163.com'},2);
  putRequest.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  putRequest.onerror = function (event) {
    console.log('数据更新失败');
  }
}
</script>
</head>
<body>
  <p>indexedDB数据库批量增加数据</p>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163817vb5faxyfwvb11y5f.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中因为主键是自增长的,数据外键,数据内并不存在,所以需要通过第二个参数指定。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script>
let students=[
  { 
    id:1001, 
    name:"张三", 
    age:21,
    sex:"男"
  },{ 
    id:1002, 
    name:"李四", 
    age:20,
    sex:"女"
  },{ 
    id:1003, 
    name:"王五", 
    age:19,
    sex:"女"
  }
];
let request = window.indexedDB.open("antzone", 1);
request.onupgradeneeded = (ev) => {
  let db = ev.target.result;
  if (!db.objectStoreNames.contains('students')) {
    let objectStore = db.createObjectStore('students',{autoIncrement:true});
    objectStore.createIndex("xingbie","sex",{ unique: false });
  }
}
request.onsuccess = (ev) => {
  let db = ev.target.result;
  let transaction = db.transaction(['students'], 'readwrite');
  let objectStore = transaction.objectStore('students');
  let putRequest = objectStore.put({id:1002, name:'蚂蚁部落', age:5, email:'ant@163.com'},6);
  putRequest.onsuccess = function (event) {
    console.log('数据更新成功');
  };

  putRequest.onerror = function (event) {
    console.log('数据更新失败');
  }
}
</script>
</head>
<body>
  <p>indexedDB数据库批量增加数据</p>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201907/21/163847dibry7z5kij0zk00.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果要更新的数据不存在,那么增加对应的数据。

上述代码本意是更新主键为6的数据,但是原来数据库不存在此数据,所以就添加此数据。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部