<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="selectBook">查询数据</button>
<button id="add">添加数据</button>
<button id="getDataByTitle">通过书名查询数据</button>
<div id = "con"></div>
<script type="text/javascript">
//判断浏览器是否支持 indexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
}
var db;//保存数据库信息
//新创建了一个数据库， 1：数据库的名称 2：数据库的版本号
var request = indexedDB.open('Book',3);
//如果创建成功
request.onsuccess = function(e){
console.log("数据库成功创建！");
//db = e.target.result;
//将创建成功的数据库信息保存在 db
db = request.result;
console.log(db.name);
console.log(db.version);
console.log(db.objectStoreNames);
//获取数据，渲染到页面上
//游标
//事务
var oSelectBook = document.getElementById('selectBook');
var oCon = document.getElementById('con');
oSelectBook.onclick = function(){
//事务 1:表名 2：读写方式
var tx = db.transaction(['books'],'readwrite');
//获取表信息
var store = tx.objectStore('books');
//打开游标,遍历表中的所有数据
store.openCursor().onsuccess = function(ev){
var cursor = ev.target.result;
if(cursor){
var key = cursor.key;
var value = cursor.value;
console.log('--------游标打印出的结果：--------');
console.log(key);
console.log(value);
oCon.innerHTML +=key+ '， 书名：'+value.title+'，作者：'+value.author+'<br>';
//游标向下加一
cursor.continue();
}
}
}
//通过 书名索引查询数据
var oGetDataByTitle = document.getElementById('getDataByTitle');
oGetDataByTitle.onclick = function(){
//事务
var transaction = db.transaction(['books'],"readwrite");
var store = transaction.objectStore('books');
//获取索引
//console.log(store.index('by_title'));
var titleIndex = store.index('by_title');
titleIndex.openCursor().onsuccess = function(ev){
var cursor = ev.target.result;
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
//游标更新
cursor.continue();
}
}
}
}
//如果创建失败
request.onerror = function(){
console.log("数据库创建失败！");
}
//创建表，保存数据到表中,
request.onupgradeneeded = function(){
console.log("数据库升级");
db = request.result;
//判断books表是否存在，如果不存在，新创建 该表
if(!db.objectStoreNames.contains('books')){ //contains('books') 如果没找到 返回false
var store = db.createObjectStore('books',{//创建表
keyPath:'isbn'//表的主键
});
}
//增加索引 ,增加查询的速度
store.createIndex('by_title','title',{unique:true});
//对表添加数据
store.put({isbn:1,title:"鲁迅文集",author:"周树人",price:100});
store.put({isbn:3,title:"鲁迅文集1",author:"周树人1",price:80});
store.put({isbn:5,title:"鲁迅文集2",author:"周树人2",price:50});
store.put({isbn:9,title:"鲁迅文集3",author:"周树人3",price:30});
//store.put({isbn:9,title:"鲁迅文集4",author:"周树人4",price:30});
}
//新增数据
var oAdd = document.getElementById('add');
oAdd.onclick = function(){
//新增的数据
var bookInfo = {isbn:11,title:"小叮当",author:"周",price:40};
//事务
var tx = db.transaction(['books'],'readwrite');
var store = tx.objectStore('books');
var addRes = store.put(bookInfo);//主键的内容一样时，是属于覆盖式添加
//var addRes = store.add(bookInfo);//主键内容一样时，会报错
addRes.onsuccess = function(){
alert('添加成功');
}
addRes.onerror = function(){
alert('添加失败');
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="selectBook">查询数据</button>
<button id="add">添加数据</button>
<button id="getDataByTitle">通过书名查询数据</button>
<div id = "con"></div>
<script type="text/javascript">
//判断浏览器是否支持 indexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.")
}
var db;//保存数据库信息
//新创建了一个数据库， 1：数据库的名称 2：数据库的版本号
var request = indexedDB.open('Book',3);
//如果创建成功
request.onsuccess = function(e){
console.log("数据库成功创建！");
//db = e.target.result;
//将创建成功的数据库信息保存在 db
db = request.result;
console.log(db.name);
console.log(db.version);
console.log(db.objectStoreNames);
//获取数据，渲染到页面上
//游标
//事务
var oSelectBook = document.getElementById('selectBook');
var oCon = document.getElementById('con');
oSelectBook.onclick = function(){
//事务 1:表名 2：读写方式
var tx = db.transaction(['books'],'readwrite');
//获取表信息
var store = tx.objectStore('books');
//打开游标,遍历表中的所有数据
store.openCursor().onsuccess = function(ev){
var cursor = ev.target.result;
if(cursor){
var key = cursor.key;
var value = cursor.value;
console.log('--------游标打印出的结果：--------');
console.log(key);
console.log(value);
oCon.innerHTML +=key+ '， 书名：'+value.title+'，作者：'+value.author+'<br>';
//游标向下加一
cursor.continue();
}
}
}
//通过 书名索引查询数据
var oGetDataByTitle = document.getElementById('getDataByTitle');
oGetDataByTitle.onclick = function(){
//事务
var transaction = db.transaction(['books'],"readwrite");
var store = transaction.objectStore('books');
//获取索引
//console.log(store.index('by_title'));
var titleIndex = store.index('by_title');
titleIndex.openCursor().onsuccess = function(ev){
var cursor = ev.target.result;
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
//游标更新
cursor.continue();
}
}
}
}
//如果创建失败
request.onerror = function(){
console.log("数据库创建失败！");
}
//创建表，保存数据到表中,
request.onupgradeneeded = function(){
console.log("数据库升级");
db = request.result;
//判断books表是否存在，如果不存在，新创建 该表
if(!db.objectStoreNames.contains('books')){ //contains('books') 如果没找到 返回false
var store = db.createObjectStore('books',{//创建表
keyPath:'isbn'//表的主键
});
}
//增加索引 ,增加查询的速度
store.createIndex('by_title','title',{unique:true});
//对表添加数据
store.put({isbn:1,title:"鲁迅文集",author:"周树人",price:100});
store.put({isbn:3,title:"鲁迅文集1",author:"周树人1",price:80});
store.put({isbn:5,title:"鲁迅文集2",author:"周树人2",price:50});
store.put({isbn:9,title:"鲁迅文集3",author:"周树人3",price:30});
//store.put({isbn:9,title:"鲁迅文集4",author:"周树人4",price:30});
}
//新增数据
var oAdd = document.getElementById('add');
oAdd.onclick = function(){
//新增的数据
var bookInfo = {isbn:11,title:"小叮当",author:"周",price:40};
//事务
var tx = db.transaction(['books'],'readwrite');
var store = tx.objectStore('books');
var addRes = store.put(bookInfo);//主键的内容一样时，是属于覆盖式添加
//var addRes = store.add(bookInfo);//主键内容一样时，会报错
addRes.onsuccess = function(){
alert('添加成功');
}
addRes.onerror = function(){
alert('添加失败');
}
}
</script>
</body>
</html>