您的位置:首页 > 数据库

如何创建数据库和表

2020-02-02 13:51 951 查看

1.indexedDB数据库时一种事务类型数据库

2.是NoSQL数据库

3.使用JS对象存储数据

 

创建数据库

1.indexedDB.open创建数据库

2.open方法返回一个IDBRequest对象

<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

var request, result, version = 2,
dbName = 'testDB',
osName = 'objectStore';

function createDB() {
request = db.open(dbName, version)
//请求有三种状态,如下:
request.onsuccess = function() { // 打开数据库成功
db = request.result;
console.log('open success');

}

request.onerror = function(e) { // 打开数据库失败
console.log(e.currentTarget.errormessage)
}

request.onupgradeneeded = function(e) { //请求数据库版本变化时
  db = request.result;

  console.log('upgradeneeded ');

  }
}

createDB()

<script>

 

 

 

如何创建“表”(ObjectStore)

1.indexedDB.createObjectStore创建ObjectStore

2.createObjectStore 方法可以设置主键类型

 

<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

var request, result, version = 2,
dbName = 'testDB',
osName = 'os1';

function createDB() {
request = db.open(dbName, version)
//请求有三种状态,如下:
request.onsuccess = function() { // 打开数据库成功
db = request.result;
console.log('open success');

}

request.onerror = function(e) { // 打开数据库失败
console.log(e.currentTarget.errormessage)
}

request.onupgradeneeded = function(e) { //请求数据库版本变化时
  db = request.result;

  

  if (!db.objectStoreNames.contains(osName)) {
    db.createObjectStore(osName, {autoIncrement: true}) // 创建的表的主建是自增型的
   }

  }
}

createDB()

<script>

 

 

 

 

 

事务IDBTransaction

调用indexedDB.transaction 方法会返回一个IDBTransaction对象,它含有一个objectStore方法可以让用户通过指定模式获取objectStore

indexed->transaction->objectStore

 var transaction, store;
transaction = db.transaction(osName, 'readwrite'); //打开一个事务,读写模式
store = transaction.objectStore(osName) ///获取osName指定的 object store

 

 

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Learn IndexedDB</title>
</head>

<body>

<script>
var db = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

var request, result, version = 2,
dbName = 'testDB',
osName = 'os1';

function createDB() {
request = db.open(dbName, version)
//请求有三种状态,如下:
request.onsuccess = function() { // 打开数据库成功
db = request.result;
console.log('open success');

}

 

 

//如何创建索引

//IDBObjectStore.createIndex

//  -indexName:索引名称

//  -keyPath:索引字段,可以为空或者数组(type array)

//  -optionParameters:索引配置参数

 

request.onupgradeneeded = function(e) { //请求数据库版本变化时
var store = null;
db = e.target.result;
console.log('upgradeneeded');
if (!db.objectStoreNames.contains(osName)) {
// db.createObjectStore(osName, {autoIncrement: true}) // 创建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 创建的表以字段为主建
store.createIndex('idIndex', 'id', { unique: true }); //创建索引字段id唯一
store.createIndex('categoryIndex', 'category', { multiEntry: true }); //创建索引字段为数组
store.createIndex('hpIndex', 'hp', { unique: false });
}

optionParameters:可选值

1.unique 表示keyPath 字段的数据是否唯一

2.multiEntry 表示是否为keyPath字段的每一项建立一条索引数据

 

索引的相关方法

1.查询数据--IDBIndex.get

2.查询所有数据--IDBIndex.getAll

3.打开游标--IDBIndex.openCursor

 

如何创建游标

IDBObjectStore/IDBIndex.openCursor

  -接受可选参数range和direction

  -返回一个IDBRequet对象

  -该IDBRequet对象的结果是一个IDBCursor对象

 

function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //创建游标
// request=store.openCursor(IDBKeyRange.only('002')); //指定游标KeyRange,only一个
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}

}

 

 

request.onerror = function(e) { // 打开数据库失败

console.log(e.currentTarget.errormessage)
}

request.onupgradeneeded = function(e) { //请求数据库版本变化时
var store = null;
db = e.target.result;
console.log('upgradeneeded');
if (!db.objectStoreNames.contains(osName)) {
// db.createObjectStore(osName, {autoIncrement: true}) // 创建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 创建的表以字段为主建
store.createIndex('idIndex', 'id', { unique: true }); //创建索引字段id唯一
store.createIndex('categoryIndex', 'category', { multiEntry: true }); //创建索引字段为数组
store.createIndex('hpIndex', 'hp', { unique: false });
}

}
}

createDB()

// save data
var data = [{
name: '史莱姆',
id: '001',
hp: 3,
category: ['怪物', '容易逃跑']
}, {
name: '小蝙蝠',
id: '002',
hp: 5,
category: ['怪物', '飞行']
}, {
name: '小恶魔',
id: '003',
hp: 9,
category: ['怪物', '恶魔']
}]

 

// use IDBObjectStore.add to save data
console.log(db);

 

 

 

 

//IDBRequest对象

//1.使用IDBRequest.onsuccess 绑定查询完成事件

//2.使用IDBRequest.result 获取查询结果

//3.使用IDBRequest.onerror 绑定查询失败事件

function getData(id) {

var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
console.log(request.result);
}

}

request.onerror = function(e) { // 打开数据库失败
console.log(e.currentTarget.errormessage)
}

 

 

//key的两种类型

//1.设置自增主键- {autoIncrement:true}

//2.取数据中字段作为主键- {keyPath:字段名} 例如{keyPath:id}

// db.createObjectStore(osName, {autoIncrement: true}) // 创建的表的主建是自增型的
store = db.createObjectStore(osName, { keyPath: 'id' }) // 创建的表以字段为主建

 

//关于“表”的增删查改

//1.增加数据-IDBObjectStore.add

//2.获取数据-IDBObjectStore.get

//3.获取所有数据-IDBObjectStore.addAll

//4.修改数据-IDBObjectStore.put

//5.删除数据-IDBObjectStore.delete

//6.清除所有数据-IDBObjectStore.clear

 

function addData() {
if (!db) { alert("db"); }

var transaction, store;
transaction = db.transaction(osName, 'readwrite'); //打开一个事务,读写模式
store = transaction.objectStore(osName) ///获取osName指定的 object store

data.map(function(o) {
store.add(o)
// request = store.add(o) //增加数据
// if (data.length - 1 === i) {
// request.onsuccess = function () {
// console.log('alreay add all data to db')
// showCurrentData()
// }
// }
})
}

function getData(id) {

var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
console.log(request.result);
}

}


function getAllData() {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.getAll();
request.onsuccess = function() {
console.log(request.result);
}

}


function updateData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.get(id);
request.onsuccess = function() {
request = store.put({ //更新即可以更新也可以添加,取决于关键字是否有重复
name: '小花猫',
id: id,
hp: 9
});
}

}


function deleteData(id) {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.delete(id);

request.onsuccess = function() {
console.log('delete success');
}

}

function clear() {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName);
var request = store.clear();
request.onsuccess = function() {
console.log('clear success');
}

}

 

IDBKeyRange对象

1.upperBound指定游标范围的上限

2.lowerBound指定游标范围的下限

3.bound指定游标范围的区间

4.only指定游标的值

 


function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //创建游标
// request=store.openCursor(IDBKeyRange.only('002')); //指定游标KeyRange,only一个
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}

}

 

Direction参数

direction参数的值

-next :顺序查询  -nextunique:顺序唯一查询

-prev:逆序查询  -prevunique:逆序唯一查询

function useCursorGetData() {
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //创建游标
// request=store.openCursor(IDBKeyRange.only('002')); //指定游标KeyRange,only一个
request = store.openCursor(null, 'prev');
request.onsuccess = function() {
var cursor = request.result;
if (cursor) {
console.log(cursor.value);
cursor.continue();
}
}

}

索引和游标的结合使用
function useIndexGetData() { // 索引只能查询数据,并不能操作数据
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //创建游标
// request=store.openCursor(IDBKeyRange.only('002')); //指定游标KeyRange,only一个
index = store.index('categoryIndex');
request = index.getAll('飞行');

request.onsuccess = function() {
console.log(request.result);
}
}


function useIndexAndCursorOperateData() { // 索引和游标结合,可以查询和操作数据
var transaction = db.transaction(osName, 'readwrite'), //打开一个事务,读写模式
store = transaction.objectStore(osName),
// request=store.openCursor(); //创建游标
// request=store.openCursor(IDBKeyRange.only('002')); //指定游标KeyRange,only一个
// index=store.index('categoryIndex');
index = store.index('hpIndex');
// request = index.openCursor(IDBKeyRange.upperBound(5)); // 5(包含5)以下
request = index.openCursor(IDBKeyRange.bound(5,10,true,true)); // 范围(5到10)

request.onsuccess = function() {
var cursor = request.result,value=null;
if (cursor) {
// if(cursor.value.id==='002'){
// cursor.update({ // 更新数据
// name: '小蝙蝠',
// id: '002',
// hp: 10,
// category:['怪物','飞行']
// })

// cursor.delete().onsuccess=function () { // 删除数据
// console.log('delete');

// }

// }
value = cursor.value;
value.hp += 20;
cursor.update(value);
console.log(cursor.value);
cursor.continue();
}
}
}
</script>
</body>

</html>

转载于:https://www.cnblogs.com/jian1234/p/10002144.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
dick4123632 发布了0 篇原创文章 · 获赞 0 · 访问量 206 私信 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: