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文本文件保存 ...
随机推荐
- Nessus的安装(Linux)
Nessus有三种安装方式: 1.源文件安装 源文件安装是最复杂的安装方式,用此方式安装可以修改配置参数. 2.rpm安装 rpm安装比起源文件安装更简单一些,它已经把一些底层的东西写好了,用户只要按 ...
- UI篇(初识君面)
我们的APP要想吸引用户,就要把UI(脸蛋)搞漂亮一点.毕竟好的外貌是增进人际关系的第一步,我们程序员看到一个APP时,第一眼就是看这个软件的功能,不去关心界面是否漂亮,看到好的程序会说"我 ...
- Android多媒体框架图
Android多媒体整体架构图 MediaPlayer框架图 Camera框架图 SoundRecorder框架图 VideoCamera框架图 OpenCore与Skia ALSA Audio框架图 ...
- css实现网页表格
一. 准备工作 1. 点击此下载 相关文件 二. 在浏览器中运行 table.html 文件,即可看到效果 三. 效果图
- Ubuntu 15.1 unity在顶部面板显示系统CPU/内存/网络速度
全部的文件:http://files.cnblogs.com/files/xiaobo-Linux/ubuntu%E6%98%BE%E7%A4%BA%E7%B3%BB%E7%BB%9F%E7%BD%9 ...
- php 7.0 新特性
php 7 主题是性能优化 SEO 之前版本:开发效率快,语言本身性能差 普通的php网站:IO密集型,瓶颈在mysql上,体现不出来php的性能劣势,在密集计算方面比C,C++,JAVA差几十倍甚 ...
- Lite Your Android English
https://litesuits.com/ 一些话 简约的背后,往往是复杂 还原面向对象应有的体验,让应对繁多业务所增加的,并未增加. 展开设计理念 Lite每个项目仅几十KB,这相当于你项目中 ...
- 2015最流行的Android组件、工具、框架大全
Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了一大批的优秀的组件. 本文试图将目前流行的组件收集起来以 ...
- Java NIO (转)
Java NIO提供了与标准IO不同的IO工作方式: Channels and Buffers(通道和缓冲区):标准的IO基于字节流和字符流进行操作的,而NIO是基于通道(Channel)和缓冲区(B ...
- [LeetCode] Binary Tree Longest Consecutive Sequence 二叉树最长连续序列
Given a binary tree, find the length of the longest consecutive sequence path. The path refers to an ...