前端数据库indexedDB的一些操作

来源：糊涂一时而已发布时间：2019-03-28 14:08:24 阅读量：1248

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button id="getDataByTitle">通过书名查询数据</button>

//判断浏览器是否支持 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>

标签： PHP 环境搭建

评论：

你还没有登录，请先

客服在线

13450931319