IndexedDB(本地存储)
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(本地存储)的更多相关文章
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- 本地存储数据库indexedDB实现离线预览的功能
今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...
- HTML5本地存储——IndexedDB二:索引
HTML5本地存储——IndexedDB(二:索引) 在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...
- HTML5本地存储——Web SQL Database与indexedDB
虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 15个JavaScript本地存储技术的函数库和工具
当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...
随机推荐
- Linux下安装JDK和Eclipse
安装步骤: (1)下载JDK (jdk-8u20-linux-x64.tar.gz) (2)卸载系统自带的开源JDK rpm -qa |grep java rpm –e java (3) ...
- 在Visual Studio 2015 中添加SharePoint 2016 开发模板
前言 SharePoint 2016已经发布很久了,然而,默认安装VS2015以后,却没有SharePoint 2016的开发模板.其实问题很简单,和VS2012开发SharePoint 2013一样 ...
- 关于从Activity A跳转到Activity B ,其中Activity A中有一个VideoView,Activity B中有一个MediaPlayer。
两个不同的视频的跳转, 前面我是在onStop()方法中销毁VideoView(因为MediaPlayer是全局共用的,而VideoView内包含MediaPlayer),但是每次进入Activity ...
- java web 之客户关系管理系统
这个周末真的是觉得自己学会了一个比较高大上的本领,为什么这么觉得呢?那是因为星期六的时候觉得自己可以看看源码能做出来,可是让我头疼的是花费了一上午的时间还是没有弄出来,还好上天给了我机会,要是没有老师 ...
- MAC的SVN怎么设置允许.a文件上传
首先在mac中svn的安装会去选择Cornerstone 如果遇到这个问题肯定是已经安装并准备上传.a 文件了.首先要清楚svn是默认过滤忽略.a文件的上传的,要想可以上传.a 可以通过这个简单的方法 ...
- RadioButton与CheckBox
笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- Android LayoutInflater.inflate(int resource, ViewGroup root, boolean attachToRoot)的参数理解
方法inflate(int resource, ViewGroup root, boolean attachToRoot) 中 第一个参数传入布局的资源ID,生成fragment视图,第二个参数是视图 ...
- BZOJ 2693: jzptab [莫比乌斯反演 线性筛]
2693: jzptab Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1194 Solved: 455[Submit][Status][Discu ...
- Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...