var students = [{
id: 1001,
name: "Byron",
age: 24
}, {
id: 1002,
name: "Frank",
age: 30
}, {
id: 1003,
name: "Aaron",
age: 26
}, {
id: 1004,
name: "Casper",
age: 26
}]; function hasIndexedDB() {
if ("indexedDB" in window) {
console.log("支持indexedDB!");
return true;
} else {
console.log("不支持indexedDB!");
return false;
}
} var dataBase = null;
// 打开数据库
function openIDB(IDBName, IDBVersion) {
var IDBVersion = IDBVersion || 1;
var IDBOpenDBRequest = indexedDB.open(IDBName, IDBVersion); IDBOpenDBRequest.onupgradeneeded = function(e) {
var _db = e.target.result;
createObjectStore(_db, "students");
deleteObjectStore(_db, "firstOS");
console.log('DB version changed to ' + IDBVersion);
}
IDBOpenDBRequest.onsuccess = function(e) {
dataBase = e.target.result;
// addData(dataBase,"students");
// getDataByKey(dataBase,"students",1001);
updateDataByKey(dataBase, "students", 1001);
console.log("openIDB Success!");
}
IDBOpenDBRequest.onerror = function(e) {
console.log("Error:" + e.currentTarget.error.message);
}
} // 添加数据
function addData(db, storeName) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName); for (var i = 0; i < students.length; i++) {
store.add(students[i]);
}
} // 查询数据(根据关键字)
function getDataByKey(db, storeName, keyValue) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName); var request = store.get(keyValue);
request.onsuccess = function(e) {
var student = e.target.result;
console.log(student.name);
};
} // 更新数据
function updateDataByKey(db, storeName, keyValue) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(keyValue);
request.onsuccess = function(e) {
var student = e.target.result;
student.age = 35;
store.put(student);
};
} // 删除数据
function deleteDataByKey(db, storeName, keyValue) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.delete(keyValue);
} // 清空Store
function clearObjectStore(db, storeName) {
var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.clear();
} // 删除Store(在onupgradeneeded里调用)
function deleteObjectStore(db, storeName) {
if (db.objectStoreNames.contains(storeName)) {
db.deleteObjectStore(storeName);
console.log("deleteObjectStore:" + storeName + ",成功!");
}
} // 关闭dataBase
function closeIDB(db) {
db.close();
} // 删除dataBase
function deleteIDB(db) {
indexedDB.deleteDatabase(db);
} // 新增Store(在onupgradeneeded里调用)
function createObjectStore(db, storeName) {
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName, {
autoIncrement: true
});
console.log("createObjectStore:" + storeName + ",成功!");
}
} // 新增Store--带索引(在onupgradeneeded里调用)
function createObjectStoreWidthIndex(db, storeName) {
if (!db.objectStoreNames.contains(storeName)) {
var store = db.createObjectStore(storeName, {
keyPath: "id"
});
// 创建两个索引表
store.createIndex('nameIndex', 'name', {
unique: true
});
store.createIndex('ageIndex', 'age', {
unique: false
});
console.log("createObjectStore:" + storeName + ",成功!");
}
} // 获取数据(根据索引)
function getDataByIndex(db, storeName) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName);
var index = store.index("nameIndex");
index.get('Byron').onsuccess = function(e) {
var student = e.target.result;
console.log(student.id);
}
} // 使用游标
function fetchStoreByCursor(db, storeName) {
var transaction = db.transaction(storeName, 'readonly');
var store = transaction.objectStore(storeName);
var request = store.openCursor();
request.onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
console.log(cursor.key);
var currentStudent = cursor.value;
console.log(currentStudent.name);
cursor.continue();
}
};
} // 索引与游标结合
function getDataByMultiple(db, storeName) {
var transaction = db.transaction(storeName);
var store = transaction.objectStore(storeName);
var index = store.index("ageIndex");
// index.openKeyCursor(26);
var request = index.openCursor(IDBKeyRange.only(26));
request.onsuccess = function(e) {
var cursor = e.target.result;
if (cursor) {
var student = cursor.value;
console.log(student.id);
cursor.continue();
}
}
} // 指定游标范围
// IDBKeyRange.only(value):只获取指定数据
// IDBKeyRange.lowerBound(value,isOpen):获取最小值是value的数据
// IDBKeyRange.upperBound(value,isOpen):获取最大值是value的数据
// IDBKeyRange.bound(value1,value2,isOpen1,isOpen2) if (hasIndexedDB()) {
openIDB("test1", 2);
}

参考:
  IndexedDB:浏览器端数据库
  HTML5本地存储——IndexedDB(一:基本使用)

IndexedDB(本地存储)的更多相关文章

  1. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  2. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  3. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  4. HTML5本地存储——IndexedDB

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  5. 本地存储数据库indexedDB实现离线预览的功能

    今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...

  6. HTML5本地存储——IndexedDB二:索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  7. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  8. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. 15个JavaScript本地存储技术的函数库和工具

    当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...

随机推荐

  1. Linux下安装JDK和Eclipse

    安装步骤: (1)下载JDK (jdk-8u20-linux-x64.tar.gz) (2)卸载系统自带的开源JDK  rpm  -qa |grep  java rpm  –e   java  (3) ...

  2. 在Visual Studio 2015 中添加SharePoint 2016 开发模板

    前言 SharePoint 2016已经发布很久了,然而,默认安装VS2015以后,却没有SharePoint 2016的开发模板.其实问题很简单,和VS2012开发SharePoint 2013一样 ...

  3. 关于从Activity A跳转到Activity B ,其中Activity A中有一个VideoView,Activity B中有一个MediaPlayer。

    两个不同的视频的跳转, 前面我是在onStop()方法中销毁VideoView(因为MediaPlayer是全局共用的,而VideoView内包含MediaPlayer),但是每次进入Activity ...

  4. java web 之客户关系管理系统

    这个周末真的是觉得自己学会了一个比较高大上的本领,为什么这么觉得呢?那是因为星期六的时候觉得自己可以看看源码能做出来,可是让我头疼的是花费了一上午的时间还是没有弄出来,还好上天给了我机会,要是没有老师 ...

  5. MAC的SVN怎么设置允许.a文件上传

    首先在mac中svn的安装会去选择Cornerstone 如果遇到这个问题肯定是已经安装并准备上传.a 文件了.首先要清楚svn是默认过滤忽略.a文件的上传的,要想可以上传.a 可以通过这个简单的方法 ...

  6. RadioButton与CheckBox

    笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...

  7. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. Android LayoutInflater.inflate(int resource, ViewGroup root, boolean attachToRoot)的参数理解

    方法inflate(int resource, ViewGroup root, boolean attachToRoot) 中 第一个参数传入布局的资源ID,生成fragment视图,第二个参数是视图 ...

  9. BZOJ 2693: jzptab [莫比乌斯反演 线性筛]

    2693: jzptab Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1194  Solved: 455[Submit][Status][Discu ...

  10. Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

    怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...