|
|
|
@ -3,7 +3,7 @@ |
|
|
|
* @email: binbin0314@126.com |
|
|
|
* @Date: 2021-07-09 09:10:14 |
|
|
|
* @LastEditors: aBin |
|
|
|
* @LastEditTime: 2021-07-09 19:01:32 |
|
|
|
* @LastEditTime: 2021-07-12 15:33:35 |
|
|
|
--> |
|
|
|
<template> |
|
|
|
<div style="padding: 12px"> |
|
|
|
@ -60,6 +60,7 @@ export default { |
|
|
|
console.log('error', error); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 首先判断浏览器是否支持indexedDB |
|
|
|
justifyIndexDEB() { |
|
|
|
if ('indexedDB' in window) { |
|
|
|
// 支持 |
|
|
|
@ -71,52 +72,35 @@ export default { |
|
|
|
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB; |
|
|
|
} |
|
|
|
}, |
|
|
|
// 新建数据库 |
|
|
|
createindexDB() { |
|
|
|
const that = this; |
|
|
|
//1-我们先创建一个对象，放一些数据比如dbInfo ，可以设置数据库名字dbName，数据库的版本dbVersion |
|
|
|
|
|
|
|
var dbInfo = { |
|
|
|
dbName: 'DataBase', |
|
|
|
dbVersion: 2021, |
|
|
|
dbInstance: {}, |
|
|
|
}; |
|
|
|
|
|
|
|
//2-创建数据库 indexedDB.open方法用于打开数据库。返回的是一个对象，第一个参数是数据库名称，格式为字符串。第二个参数是数据库版本。 |
|
|
|
|
|
|
|
//2-创建数据库 indexedDB.open方法用于打开数据库。返回的是一个对象， |
|
|
|
// 第一个参数是数据库名称，格式为字符串。第二个参数是数据库版本。 |
|
|
|
var openRequest = window.indexedDB.open(dbInfo.dbName, dbInfo.dbVersion); |
|
|
|
|
|
|
|
//3-创建数据库时会处罚三个事件之一，这三个事件，分别是upgradeneeded，success，onerror，意思就不说了吧，不懂得可以用字典查嘛。 |
|
|
|
|
|
|
|
openRequest.onupgradeneeded = function(e) { |
|
|
|
//第一次打开数据库 ^-* |
|
|
|
|
|
|
|
console.log('第一次打开该数据库，或者数据库版本发生变化....', new Date().getTime()); |
|
|
|
that.db = e.target.result; |
|
|
|
var storeNames = that.db.objectStoreNames; |
|
|
|
|
|
|
|
//创建数据库的表格（或者叫数据库仓库） |
|
|
|
if (!storeNames.contains('chart')) { |
|
|
|
that.db.createObjectStore('chart', { keyPath: 'kkk' }); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
openRequest.onsuccess = function(e) { |
|
|
|
//success：打开成功^-^ |
|
|
|
console.log('数据库打开成功...', new Date().getTime()); |
|
|
|
that.db = e.target.result; |
|
|
|
var trans = that.db.transaction(['chart'], 'readwrite'); |
|
|
|
var store = trans.objectStore('chart'); |
|
|
|
|
|
|
|
//4-这里面我要写很多要调用的函数了，比如，下面.....wu la wu la..... |
|
|
|
|
|
|
|
// that.addData(); //数据库中添加数据 ------->xian说这个啦 |
|
|
|
// del_data(db); //数据库中删除数据 |
|
|
|
// deal_data(db); //读取数据 |
|
|
|
// traverse_data(db); //遍历数据 |
|
|
|
// that.read(); |
|
|
|
// that.update_data(); //更新数据（类似于Add方法） |
|
|
|
}; |
|
|
|
|
|
|
|
openRequest.onerror = function(e) { |
|
|
|
//error：打开失败*-* |
|
|
|
console.log('数据库打开失败...'); |
|
|
|
@ -202,6 +186,29 @@ export default { |
|
|
|
var request = store.put(obj); |
|
|
|
console.log('已更新数据', new Date().getTime()); |
|
|
|
}, |
|
|
|
remove_data() { |
|
|
|
//1-把前面创建的数据库，传递过来 |
|
|
|
//2-返回一个事务对象,indexDB 数据库只有 readwrite 以及readonly两个可爱的状态。 返回一个事务对象。 |
|
|
|
var trans = this.db.transaction(['chart'], 'readwrite'); |
|
|
|
var store = trans.objectStore('chart'); |
|
|
|
|
|
|
|
// 3-通过关键字（索引）删除数据 |
|
|
|
var request = store.delete(1); |
|
|
|
request.onsuccess = function(event) { |
|
|
|
console.log('数据删除成功'); |
|
|
|
}; |
|
|
|
}, |
|
|
|
readAll() { |
|
|
|
var trans = this.db.transaction(['chart'], 'readwrite'); |
|
|
|
var store = trans.objectStore('chart'); |
|
|
|
store.openCursor().onsuccess = function(event) { |
|
|
|
if (event.target.result) { |
|
|
|
console.log(event.target.result); |
|
|
|
} else { |
|
|
|
console.log('没有更多数据了！'); |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
