我把我自己的代码粘贴上来。。。

来源:2-3 HTML5存储之indexedDB的实际操作

DangerZone

2015-03-12 18:50

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IndexDB</title>
</head>
<body>

<script>

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;

var request, db;

var tableName = 'users';

var users = [{
username: 'aaaa',
password: '1111',
name: 'AAAA',
phone: '1111'
}, {
username: 'bbbb',
password: '2222',
name: 'BBBB',
phone: '2222'
}, {
username: 'cccc',
password: '3333',
name: 'CCCC',
phone: '3333'
}, {
username: 'dddd',
password: '4444',
name: 'DDDD',
phone: '4444'
}];

request = indexedDB.open('zjzhome'); //创建并打开数据库user   删除数据库 indexedDB.deleteDatabase(db)

request.onupgradeneeded = function(e) {
console.log('onupgradeneeded');
db = e.target.result;
//db.setVersion已经废弃
console.log(db.version);

if(!db.objectStoreNames.contains(tableName)) {
console.log('need create object store');
var store = db.createObjectStore(tableName, { keyPath: 'username' }); //只能在onupgradeneeded事件完成

store.createIndex('name', 'name', { unique: false }); //创建索引
store.createIndex('phone', 'phone', { unique: false });
}
}
request.onerror = function(e) {
console.log('some errors happened while try to open: ' + e.target.errorCode);
}
request.onsuccess = function(e) {
console.log('onsuccess');
db = e.target.result;
console.log(db.version);
db.onerror = function(e) {
console.log('db error: ' + e.target.errorCode);
console.dir(e.target);
}

if(db.objectStoreNames.contains(tableName)) {
console.log('contains table: ' + tableName);
var transaction = db.transaction([tableName], 'readwrite'); //事务 增删改查
transaction.oncomplete = function(e) {
console.log('All Done!');
}
transaction.onerror = function(e) {
console.log(e);
}

var objectStore = transaction.objectStore(tableName); //得到表的objectStore对象

for(var i = 0; i < users.length; i++) {
objectStore.add(users[i]); //添加数据 更新数据用put
}

objectStore.openCursor().onsuccess = function(e) { //使用游标遍历数据
var cursor = e.target.result;
if(cursor) {
console.log(cursor.key);
console.log(cursor.value);
cursor.continue();
} else {
console.log('done with the cursor');
}
}

objectStore.openCursor().onerror = function(e) {
console.log(e);
}

var removeKey = 'aaaa';
objectStore.get(removeKey).onsuccess = function(e) { //根据primary key查询
console.log(this.result);
}
objectStore.delete(removeKey); //删除 依然要处理success和error事件,此处省略

var boundKeyRange = IDBKeyRange.only('BBBB'); //生成表示范围的Range对象
objectStore.index('name').openCursor(boundKeyRange).onsuccess = function(e) { //根据索引查询
var cursor = e.target.result;
if(!cursor) return;

var rowData = cursor.value;
console.log(rowData);
}
}
}

</script>

</body>
</html>


写回答 关注

1回答

  • datahome
    2016-02-05 16:14:28

    好。谢谢共享。

HTML5存储

本课程主要讲解浏览器端存储的实现方案,从而优化你的业务

55331 学习 · 109 问题

查看课程

相似问题