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文本文件保存 ...
随机推荐
- Scala For Java的一些参考
变量 String yourPast = "Good Java Programmer"; val yourPast : String = "Good Java ...
- android universal-image-loader的使用
全局配置 android-image-loader的使用 public class Application extends Application { @Override public void on ...
- UITableView点击每个Cell,Cell的子内容的收放
关于点击TableviewCell的子内容收放问题,拿到它的第一个思路就是, 方法一: 运用UITableview本身的代理来处理相应的展开收起: 1.代理:- (void)tableView:(UI ...
- Appfuse:记录操作日志
appfuse的数据维护操作都发生在***form页面,与之对应的是***FormController,在Controller中处理数据的操作是onSubmit方法,既然所有的操作都通过onSubmi ...
- JavaScript线程机制
浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:JS引擎线程(用于处理JS).GUI渲染线程(用于页面渲染).浏览器事件触发线程(用于控制交互). 除此之外 ...
- Mac配置PHP
前言 在MacOS中已经内置了PHP和Apache,所以不需要再额外安装它们,只需要简单几步即可运行PHP. 配置Apache 查看Apache版本: $ sudo apachectl -v 终端关闭 ...
- jq focus 在火狐(Firefox)下无效
今天写代码的时候发现,在blur事件里面写focus获取焦点无效, $input.blur(function(){ ……………… $input.focus(): } 而且只是在火狐下面无效而已,很明显 ...
- MPI-2 并行IO的使用方法
写的MPI程序需要用到并行IO来操作文件,但是搜遍了度娘都没有找到多少关于并行IO函数的使用方法.最后在知网搜到了一些有用的论文,看了一下,感觉豁然开朗. MPI-1对文件的操作是使用绑定语言的函数调 ...
- gridview安卓实现单行多列横向滚动
<GridLayout android:layout_width="match_parent" android:layout_height="match_paren ...
- 基于英特尔® 至强™ 处理器 E5 产品家族的多节点分布式内存系统上的 Caffe* 培训
原文链接 深度神经网络 (DNN) 培训属于计算密集型项目,需要在现代计算平台上花费数日或数周的时间方可完成. 在最近的一篇文章<基于英特尔® 至强™ E5 产品家族的单节点 Caffe 评分和 ...