<!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>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
