而不是使用表来保存数据

作者: mgm娱乐网址  发布:2019-11-22

向数据库中增加数据

前面提到,增加数据需要通过事务事务的使用方式如下:

var transaction = db.transaction(['movies'], 'readwrite'); transaction.oncomplete = function(event) { console.log('事务完成!'); }; transaction.onerror = function(event) { console.log('事务失败!', event.target.errorCode); }; transaction.onabort = function(event) { console.log('事务回滚!'); };

1
2
3
4
5
6
7
8
9
10
var transaction = db.transaction(['movies'], 'readwrite');
transaction.oncomplete = function(event) {
    console.log('事务完成!');
};
transaction.onerror = function(event) {
    console.log('事务失败!', event.target.errorCode);
};
transaction.onabort = function(event) {
    console.log('事务回滚!');
};

mgm娱乐网址 1数据库对象的transaction()方法接收两个参数:

  • storeNames // 对象存储空间,可以是对象存储空间名称的数组,也可以是单个对象存储空间名称,必传 [array|string]
  • mode // 事务模式,上面提到的三种之一,可选,默认值是readonly [string]

这样,我们得到一个事务对象transaction, 有三种事件可能会被触发: complete, error, abort. 现在,我们通过事务向数据库indexedDB-test的 对象存储空间movies中插入数据:

var objectStore = transaction.objectStore('movies'); // 指定对象存储空间 var data = [{ "title": "寻梦环游记", "year": "2017", "alt": "", "id": "20495023" }, { "title": "你在哪", "year": "2016", "alt": "", "id": "26639033" }, { "title": "笔仙咒怨", "year": "2017", "alt": "", "id": "27054612" }]; data.forEach(function(item, index){ var request = objectStore.add(item); request.onsuccess = function(event) { console.log('插入成功!', index); console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id) }; });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var objectStore = transaction.objectStore('movies');  // 指定对象存储空间
var data = [{
  "title": "寻梦环游记",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/20495023/",
  "id": "20495023"
}, {
  "title": "你在哪",
  "year": "2016",
  "alt": "https://movie.douban.com/subject/26639033/",
  "id": "26639033"
}, {
  "title": "笔仙咒怨",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/27054612/",
  "id": "27054612"
}];
data.forEach(function(item, index){
    var request = objectStore.add(item);
    request.onsuccess = function(event) {
        console.log('插入成功!', index);
        console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id)
    };
});

mgm娱乐网址 2

通过事务对象transaction,在objectStore()方法中指定对象存储空间,就得到了可以对该对象存储空间进行操作的对象objectStore.

向数据库中增加数据,add()方法增加的对象,若是数据库中已存在相同的主键,或者唯一性索引的键值重复,则该条数据不会插入进去;

增加数据还有一个方法: put(), 使用方法和add()不同之处在于,数据库中若存在相同主键或者唯一性索引重复,则会更新该条数据,否则插入新数据。

连接数据库

要使用它必须先打开,通过 indexDB.open(name, version)方法打开一个数据库

  • name : 表示数据要打开的数据库的名称
  • version:为打开数据库的版本号

四、增加和删除数据

对数据库的操作(增删查改等)都需要通过事务来完成,事务具有三种模式:

  • readonly 只读(可以并发进行,优先使用)
  • readwrite 读写
  • versionchange 版本变更

事务和查询操作数据

最简单的创建事务的方式是:
var transaction = db.transaction(); // db就是前面的数据库对象
这种方式创建的事务,只能读取数据库中保存的所有对象

一般用法是:
var transaction = db.transaction('customes', 'readwrite');
表示只加载customers对象存储空间中的数据,并且是以可读可写的方式加载

如果不传第二个参数,则表示只可访问,不可修改;

这里返回的transaction是事务的索引

然后使用objectStore()方法并传入对象存储空间的名称,就可以访问特定的存储空间了;

如下:

let transaction = db.transaction('customers', 'readwrite'); 
let store = transaction.objectStore('customers'); 

取得了上面的store后,我们可以使用如下方法对数据进行操作:

  • add()和put()方法:用于存储数据
    let req = store.add(data);
  • get(key)方法:获取键为key的对象
    let req = store.get(key);
  • delete(key)方法:删除键为key的对象
    let req = store.delete(key);
  • clear()方法:清空对象存储空间中的所有对象
    let req = store.clear();
    使用上述方法会返回一个对象,通过对其添加onsuccess和onerror事件,可以检测操作是否成功

注意:通过oncomplete事件对象,访问不到get()请求返回的任何数据,必须在响应请求的onsuccess事件处理程序中才能访问到数据

indexedDB 基本使用

2017/12/14 · 基础技术 · 1 评论 · IndexedDB

原文出处: 党黎明   


indexedDB简介:

indexedDB 是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询,并且可以离线使用.

 

indexedDB 有以下特点:

  1. indexedDBWebSQL 数据库的取代品
  2. indexedDB遵循同源协议(只能访问同域中存储的数据,而不能访问其他域的)
  3. API包含异步API同步API两种:多数情况下使用异步API; 同步API必须同 WebWorkers 一起使用, 目前没有浏览器支持同步API
  4. indexedDB 是事务模式的数据库, 使用 key-value 键值对储存数据
  5. indexedDB 不使用结构化查询语言(SQL). 它通过索引(index)所产生的指针(cursor)来完成查询操作

键范围

游标也可以接受一个键,也就是通过键来设定游标查找的范围;
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebStorage DEMO</title>
</head>
<body>
<div class="networkStatus">
<button class="clear">清空数据</button>
<button class="add">添加数据</button>
<button class="query">查询数据</button>
<button class="delete">删除数据</button>
<button class="cursor">使用游标查询</button>
<button class="keyRange">使用keyrange查询</button>
<button class="index">使用index</button>
</div>

<script>
let network = document.querySelector('.networkStatus'),
addBtn = document.querySelector('.add'),
queryBtn = document.querySelector('.query'),
deleteBtn = document.querySelector('.delete'),
cursorBtn = document.querySelector('.cursor'),
clearBtn = document.querySelector('.clear'),
keyRange = document.querySelector('.keyRange'),
indexBtn = document.querySelector('.index')
;

// 判断网路是否在线
// if (navigator.onLine) {
// network.innerText = "网络在线";
// } else {
// network.innerText = "网络掉线";
// }

// // 监控网络状态的事件:online 和 offline, 这两个事件在window对象上
// window.addEventListener('online', () => {
// network.innerText = "网络在线";
// });

// window.addEventListener('offline', () => {
// network.innerText = "网络掉线";
// });

//--------cookie的使用---------------
let CookieUtil = {
get: (name) => {
let cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;

  if (cookieStart > -1) {
    let cookieEnd = document.cookie.indexOf(';', cookieStart);
    if (cookieEnd === -1) {
      cookieEnd = document.cookie.length;
    }
    cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
  }

  return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
  let cookieText = encodeURIComponent(name) + '=' +
                   encodeURIComponent(value);

  if (expires instanceof Date) {
    cookieText += '; expires=' + expires.toGMTString();
  }

  if (path) {
    cookieText += '; path=' + path;
  }

  if (domain) {
    cookieText += '; domain=' + domain;
  }

  if (secure) {
    cookieText += '; secure';
  }

  document.cookie = cookieText;
},

// 删除cookie, 并没有直接的删除cookie的方法,这里通过重新设置cookie名称,来对cookie进行替换
// 同时 将过期时间expires设置为过去的时间,
unset: function(name, path, domain, secure) {
  this.set(name, '', new Date(0), path, domain, secure);
}

}

CookieUtil.set('name', 'hexon');
CookieUtil.set('book', 'Profession Javascript');

// 读取cookie的值
// console.log(CookieUtil.get('name'));
mgm娱乐网址,// console.log(CookieUtil.get('book'));

// 删除cookie
CookieUtil.unset('name');
CookieUtil.unset('book');

// 设置cookie, 包括它的路径、域、失效日期
CookieUtil.set('name', 'Hexon', 'books/projs/', 'www.wrox.com', new Date('January 1, 2017'));

// 删除刚刚设置的cookie
CookieUtil.unset('name', 'books/projs/', 'www.www.wrox.com');

// 设置安全的cookie
CookieUtil.unset('name', 'hexon', null, null, null, null, true)

// --- IndexedDB 数据库的使用
var request = window.indexedDB.open('dbName', 2)
var db;
const dbName = 'the_name';
// 创建一个数据
const customerData = [
{ ssn: '444-44-4444', name: 'AAA', age: 35, email: 'AAA@company.com'},
{ ssn: '666-66-6666', name: 'CCC', age: 35, email: 'CCC@company.com'},
{ ssn: '777-77-7777', name: 'DDD', age: 32, email: 'DDD@home.org'},
{ ssn: '555-55-5555', name: 'BBB', age: 32, email: 'BBB@home.org'},

];

window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

// 3 是建立的数据库版本,如果名为MyTestDatabase的数据库不存在,就会创造该数据库,然后 onupgradeneeded 事件会被触发;
// 如果数据库存在,但是对版本升级了,也会触发onupgradeneeded事件,
// 注意:版本号是一个 unsigned long long 类型的值,因此不要使用float,否则会将其转换为其最接近的整数

// 生成处理程序
request.onerror = function (event) {
// do Something
mgm平台,alert('Database error: ' + event.target.errorCode);
};

request.onsuccess = function (event) {
// do Something
console.log('创建数据库成功');
db = event.target.result; // 创建成功后,e.target.result 中存储的是IDBDatabase对象的实例
}

// 当创建一个新的数据库 或者 更新已存在数据库的版本, onupgradeneeded事件将会被触发,新的对象存储在event.target.result中。
// 在该处理程序中,数据库已经具有先前版本的对象存储,因此不必再次创建这些对象存储,只需要创建任何我们需要的对象存储,或者
// 从先前版本中删除不在需要的对象存储。如果需要更改当前对象存储,则必须先删除旧的对象存储,然后在使用新的选项创建。
// 删除旧的对象存储,在其上的信息都会被删除;
// 注意:该事件是唯一一个能够对数据库进行操作的地方,在该事件里面,你对对象存储进行删除、修改或移除索引
request.onupgradeneeded = function(event) {
console.log('onupgradeneeded');
var db = event.target.result;

// 创建一个   对象存储空间,名为customers
var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
// 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
// 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
objectStore.createIndex('name', 'name', { unique: false});

// // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
objectStore.createIndex('email', 'email', { unique: true});

}

function save(data) {
/// 对于数据库的对象存储空间中数据的读取或修改数据,都要通过事物来组织所有操作
// 最简单的创建事物的方法是:var transaction = db.transaction();
let transaction = db.transaction('customers', 'readwrite'); // 创建一个事务,并定义该事务的操作为 “readwrite” ,并返回其索引
let store = transaction.objectStore('customers'); // 取得索引后,使用objectStore()方法并传入存储空间的名称,就可以访问特定的存储空间

for (var i in customerData) {
  let req = store.put(customerData[i]);   // 往一个存储空间中添加数据
}

transaction.oncomplete = function(event) {
  console.log(event.target);
  alert('存储数据完成');
};

transaction.onsuccess = function(event ) {
  console.log('onsuccess 事件');
}

}

function clear() {
// body...
let transaction = db.transaction('customers', 'readwrite');
let store = transaction.objectStore('customers').clear();
store.onerror = function(event) {
console.log('清空数据失败');
}
store.onsuccess = function(event) {
console.log('清空数据成功');
}
}

// 使用事务 直接通过已知的键索引 单个对象 (只能索引单个对象)
function getData() {
let transaction = db.transaction('customers', 'readwrite'); // 创建一个事物, 并定义该事务的操作为 "readonly"
let store = transaction.objectStore('customers').get('444-44-4444'); // 使用get() 可以取得值

store.onerror = function (event) {
  alert('did not get the object');
}

store.onsuccess = function (event) {
  var result = event.target.result;
  console.log(result);
  alert('获取数据完成! 年龄是: ' + result.age);
}

}

function deleteData() {
let transaction = db.transaction('customers', 'readwrite');
let store = transaction.objectStore('customers');
store.delete('444-44-4444');
alert('s删除数据完成');
}

// 在事务内创建游标查询 可以索引 多个对象(注意: 是多个对象)
// 游标不提前手机结果
function cursorQuery() {
let transaction = db.transaction('customers', 'readwrite'),
store = transaction.objectStore('customers'),
request = store.openCursor(null) ; // 这里创建游标

request.onsuccess = function (event) {

  // event.target.result 中保存的是在存储空间中查询到的对象
  // event.target.result 中有几个属性值,可以了解到查询到的对象中的细节,
  // key: 当前访问的对象的键
  // value:当前访问的实际对象
  // primaryKey: 游标使用的键
  // direction:数值,表示游标移动的方向

  let cursor = event.target.result;
  let value, updateRequest, deleteRequest;
  if (cursor) {
  //   if (cursor.key === '555-55-5555') {
  //     value = cursor.value;   // 获取到实际的访问对象
  //     value.name = 'hexon';   // 修改对象的name属性

  //     updateRequest = cursor.update(value);      // 调用update()方法可以用指定的对象,更新对象的value
  //     updateRequest.onsuccess = function() {
  //       // 处理成功
  //     }
  //     updateRequest.onerror = function() {
  //       // 处理失败
  //     }


  //     // 使用游标删除当前项
  //     // deleteRequest = cursor.delete();
  //     // deleteRequest.onsuccess = function() {
  //     //   // 删除成功处理
  //     // }
  //     // deleteRequest.onerror = function() {
  //     //   // 删除失败处理
  //     // }


  //   }
  //   console.log(event.target.result);
  // }
  console.log(cursor.value);
  cursor.continue();      // 移动到下一项,
  }
  request.onerror = function(event) {
    console.log('游标查询创建失败')
  }
}

}

// 使用keyrange查询
function keyRangeQuery() {
let transaction = db.transaction('customers', 'readwrite')
let store = transaction.objectStore('customers');
// 使用bound()方法 定义键范围
let range = IDBKeyRange.bound('555-55-5555', '777-77-7777', true, false);
// 将键传入游标创建
let request = store.openCursor(range);

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log('游标查询到的值' + JSON.stringify(cursor.value));
    cursor.continue()     // 移动到下一项
  }

}

request.onerror = function(event) {
  console.log("使用游标 + keyrange 查询失败")
}

}

// 使用索引
function useIndex() {
let store = db.transaction('customers').objectStore('customers'),
index = store.index('name');
request = index.openCursor();
request.onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
console.log(cursor);
cursor.continue();
}
}
}

addBtn.addEventListener('click', function(e) {
save();
}, false);

deleteBtn.addEventListener('click', function(e) {
deleteData();
}, false);

queryBtn.addEventListener('click', function(e) {
getData();
}, false);

cursorBtn.addEventListener('click', function(e) {
cursorQuery();
}, false);

clearBtn.addEventListener('click', function(e) {
clear();
}, false);

keyRange.addEventListener('click', function(e) {
keyRangeQuery();
}),

indexBtn.addEventListener('click', function(e) {
useIndex();
})

</script>

</body>
</html>

五、使用索引

在前面,我们创建了两个索引alttitle, 配置对象里面的unique属性标志该值是否唯一

现在我们想找到alt属性值为https://movie.douban.com/subject/26639033/的对象,就可以使用索引。

var alt = ''; var objectStore = db.transaction('movies').objectStore('movies'); // 打开对象存储空间 var index = objectStore.index('alt'); // 使用索引'alt' var request = index.get(alt); // 创建一个查找数据的请求 request.onsuccess = function(event) { console.log('The result is:', event.target.result); }; var noDataTest = index.get('testalt'); // 没有该对象时的测试 noDataTest.onsuccess = function(event) { console.log('success! result:', event.target.result); }; noDataTest.onerror = function(event) { console.log('error! event:', event); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var alt = 'https://movie.douban.com/subject/26639033/';
var objectStore = db.transaction('movies').objectStore('movies');  // 打开对象存储空间
var index = objectStore.index('alt');  // 使用索引'alt'
var request = index.get(alt);          // 创建一个查找数据的请求
request.onsuccess = function(event) {
    console.log('The result is:', event.target.result);
};
var noDataTest = index.get('testalt');  // 没有该对象时的测试
noDataTest.onsuccess = function(event) {
    console.log('success! result:', event.target.result);
};
noDataTest.onerror = function(event) {
    console.log('error! event:', event);
};

mgm娱乐网址 3

使用唯一性索引,我们可以得到唯一的一条数据(或者undefined),那么使用非唯一性索引呢?
我们向数据库中插入一条数据,使title重复:

db.transaction('movies', 'readwrite').objectStore('movies') .add({ alt: '', title: '寻梦环游记', year: '2017', id: '123456789' }) .onsuccess = function(event) { console.log('插入成功!'); };

1
2
3
4
5
6
7
db.transaction('movies', 'readwrite').objectStore('movies')
.add({ alt: 'https://movie.douban.com/subject/27054612121/',
    title: '寻梦环游记',
    year: '2017',
    id: '123456789'
})
.onsuccess = function(event) { console.log('插入成功!'); };

使用索引title获取title值为寻梦环游记的对象:

var indexName = 'title', title = '寻梦环游记'; var objectStore = db.transaction('movies').objectStore('movies'); var index = objectStore.index(indexName); // 使用索引'alt' var request = index.get(title); // 创建一个查找数据的请求 request.onsuccess = function(event) { console.log('The result is:', event.target.result); };

1
2
3
4
5
6
7
var indexName = 'title', title = '寻梦环游记';
var objectStore = db.transaction('movies').objectStore('movies');
var index = objectStore.index(indexName);  // 使用索引'alt'
var request = index.get(title);          // 创建一个查找数据的请求
request.onsuccess = function(event) {
    console.log('The result is:', event.target.result);
};

mgm娱乐网址 4

我们得到的是键值最小的那个对象.

使用一次索引,我们只能得到一条数据; 如果我们需要得到所有title属性值为寻梦环游记的对象,我们可以使用游标.

使用游标查询数据

使用事务可以直接通过 已知的键检索单个对象。而在需要检索多个对象时,则需要在事务内创建游标。

游标并不会提前收集结果,游标先指向结果中的第一项,在接到查找下一项的指令时,才会指向下一项

如下:

let transaction = db.transaction('customers', 'readwrite'),
let store = transaction.objectStore('customers'),
let request = store.openCursor(null) ; // 这里创建游标
request.onsuccess = function (event) {
  // event.target.result 中保存的是在存储空间中查询到的对象
  // event.target.result 中有几个属性值,可以了解到查询到的对象中的细节,
  // key: 当前访问的对象的键
  // value:当前访问的实际对象
  // primaryKey: 游标使用的键
  // direction:数值,表示游标移动的方向
  let cursor = event.target.result;
  let value, updateRequest, deleteRequest;

  // 这里必须要检查游标中是否有数据
  if (cursor) {
    if (cursor.key === '555-55-5555') {
      value = cursor.value;   // 获取到实际的访问对象
      value.name = 'hexon';   // 修改对象的name属性
      // 调用update()方法可以用指定的对象,更新对象的value
      updateRequest = cursor.update(value);     
      updateRequest.onsuccess = function() {
          // 处理成功
       }
    }
    cursor.continue() ;  // 移动到下一项,会触发下一次请求,同时成功则触发request.onsuccess
  }
}

上面例子中,可以使用cursor.delete()方法删除当前项

六、使用游标

得到一个可以操作游标的请求对象有两个方法:

  • openCursor(keyRange, direction)
  • openKeyCursor(keyRange, direction)
    这两个方法接收的参数一样, 两个参数都是可选的: 第一个参数是限制值得范围,第二个参数是指定游标方向

游标的使用有以下几处:

  • 在对象存储空间上使用: var cursor = objectStore.openCursor()
  • 在索引对象上使用: var cursor = index.openCursor()

使用方式

八、indexedDB的局限性

以下情况不适合使用IndexedDB

  • 全球多种语言混合存储。国际化支持不好。需要自己处理。
  • 和服务器端数据库同步。你得自己写同步代码。
  • 全文搜索。

注意,在以下情况下,数据库可能被清除:

  • 用户请求清除数据。
  • 浏览器处于隐私模式。最后退出浏览器的时候,数据会被清除。
  • 硬盘等存储设备的容量到限。
  • 不正确的
  • 不完整的改变.

存储数据

存储数据有两种方法:add()方法put()方法

这两种方法的区别主要体现在:当要添加数据的对象存储空间中已经存在有相同键的数据时,使用add()方法添加数据会报错误,而put()方法则会对现有数据进行更新,所以add()方法一般用于初始化数据,而put()方法用于更新数据

代码如下:

// customerData 为要存储的数据
const customerData = [{ ssn: '444-44-4444', name: 'AAA', age: 35, email: '[AAA@company.com](mailto:AAA@company.com)'},{ ssn: '666-66-6666', name: 'CCC', age: 35, email: '[CCC@company.com](mailto:CCC@company.com)'},{ ssn: '777-77-7777', name: 'DDD', age: 32, email: '[DDD@home.org](mailto:DDD@home.org)'},{ ssn: '555-55-5555', name: 'BBB', age: 32, email: '[BBB@home.org](mailto:BBB@home.org)'},
];

// 创建一个事务,该事务将要对名为“customers”的对象存储空间进行 read和write 操作,并返回事务索引
let transaction = db.transaction('customers', 'readwrite'); 

// 取得索引后,使用objectStore()方法并传入存储空间的名称,就可以访问特定的存储空间,这两步是必须的
let store = transaction.objectStore('customers'); 

// 添加数据到数据库中
for (var i in customerData) {
  // 返回的req也是一个对象,可以为其添加onsuccess和onerror事件,来检测数据是否添加成功
  let req = store.put(customerData[i]);   // 往一个存储空间中添加数据

}
// 判断事务整个操作完成
transaction.oncomplete = function(event) {
  console.log(event.target);
  alert('存储数据完成');
};
}

如上就将数据存储到数据库dbNames的customers对象存储空间中

上面代码中提到了 [事务],这里先记住:凡是涉及到对数据库的读写删除操作,都需要通过 [事务] 来完成

总结

  1. 使用indexedDB.open(dbName, version)打开一个数据库连接
  2. 使用indexedDB.deleteDatabase(dbName)删除一个数据库
  3. 在数据库对象db上使用createObjectStore(storeName, config)创建对象存储空间
  4. 在对象存储空间objectStore上使用createIndex(indexName, keyName, config)创建索引
  5. 对数据库的操作都需要通过事务完成: var transction = db.transaction([storeName], mode)
  6. 数据库的增删改查均通过objectStore对象完成,var objectStore = transaction.objectStore(storeName)
  7. 对数据库数据操作有: add()get()delete()put等方法
  8. 查找数据可以使用索引: objectStore.index(indexName)
  9. 遍历和过滤数据可以使用游标: openCursor(keyRange, direction)

indexDB.open()方法的原理

分为两种情况:
1. 传入的数据库不存在
当传入的数据库不存在时,该方法就会创建一个名为name的数据库,并打开它,此时,会先触发upgradeneeded事件;调用该函数会返回一个IDBRequest对象,可以在该对象上添加onsuccess事件onerror事件
注意:当打开一个不存在的数据库时会触发upgradeneeded事件,这是触发该事件的一种途径,为什么会触发该事件呢?该事件有什么作用?留个疑问在这儿,等会解答。

2. 传入的数据库存在
这里分为两种情况:

  • 当传入的数据库存在,且version版本号与将要打开的数据库版本号也相同
    则直接打开该数据库,如果成功,则会触发onsuccess事件,失败则触发onerror事件
    注意:这里并不会触发upgradeneeded事件,为什么?留个疑问

  • 当传入的数据库存在,但是传入的version版本号高于将要打开的数据库的版本号
    则直接打开该数据库,同时触发upgradeneeded事件,然后再触发onsuccess事件onerror事件,这里也触发了onupdateneeded事件

二、创建、打开数据库

indexedDB 存在于全局对象window上, 它最重要的一个方法就是open方法, 该方法接收两个参数:

  • dbName // 数据库名称 [string]
  • version // 数据库版本 [整型number]

var DB_NAME = 'indexedDB-test', VERSION = 1, db; var request = indexedDB.open(DB_NAME, VERSION); request.onsuccess = function(event) { db = event.target.result; // console.log(event.target === request); // true db.onsuccess = function(event) { console.log('数据库操作成功!'); }; db.onerror = function(event) { console.error('数据库操作发生错误!', event.target.errorCode); }; console.log('打开数据库成功!'); }; request.onerror = function(event) { console.error('创建数据库出错'); console.error('error code:', event.target.errorCode); }; request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 .... };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var DB_NAME = 'indexedDB-test', VERSION = 1, db;
var request = indexedDB.open(DB_NAME, VERSION);
request.onsuccess = function(event) {
    db = event.target.result;
    // console.log(event.target === request); // true
    db.onsuccess = function(event) {
        console.log('数据库操作成功!');
    };
    db.onerror = function(event) {
        console.error('数据库操作发生错误!', event.target.errorCode);
    };
    console.log('打开数据库成功!');
};
request.onerror = function(event) {
    console.error('创建数据库出错');
    console.error('error code:', event.target.errorCode);
};
request.onupgradeneeded = function(event) {
   // 更新对象存储空间和索引 ....
};

若是本域下不存在名为DB_NAME的数据库,则上述代码会创建一个名为DB_NAME、版本号为VERSION的数据库; 触发的事件依次为: upgradeneededsuccess.

若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件,不会触发upgradeneeded事件. db是对该数据库的引用.

upgradeneeded事件

触发该事件的条件:当打开的数据库不存在,或者传入的数据库版本version高于当前版本,则会触发该事件

upgradeneeded事件的作用:当打开了一个数据库之后,需要开辟一个名为:对象存储空间 的玩意(可以理解为数据就是存放在这个空间里面,一个数据库可以创建多个对象存储空间),而 对象存储空间 只能在upgradeneeded事件的处理函数中创建

使用时,注意以下两种情况:

  1. 当我们第一次打开创建数据库时,会触发upgradeneeded事件,我们就需要在其中创建对象存储空间

  2. 当我们对数据库版本进行更新时,也会触发该事件,这时可以在此创建新的对象存储空间,原来的对象存储空间仍然存在

注意:如果需要对对象存储空间进行修改,那么只能先将存储在它里面的数据读取出来,再将其删除,然后使用新的选项去创建它,再写入原来的数据

打开数据库并创建对象存储空间的代码:

// 对于该API,各浏览器还未同一,所以需要对一些接口添加前缀
window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

// 判断浏览器是否支持IndexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

var request , db;
// 打开或创建 名为dbName的数据库
request = window.indexedDB.open('dbName', 2)
request.onsuccess = function (event) {
   db = event.target.result;
}

request.onerror = function (event) {
   console.log('错误代码: ' + event.target.errorCode);
}

request.onupgradeneeded = function(event) {
  db = event.target.result;  // 
  // 创建一个   对象存储空间,名为customers
  var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
  // 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
  // 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
  objectStore.createIndex('name', 'name', { unique: false});

  // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
  objectStore.createIndex('email', 'email', { unique: true});
}

本文由mgm娱乐网址发布于mgm娱乐网址,转载请注明出处:而不是使用表来保存数据

关键词:

上一篇:没有了
下一篇:没有了