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. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  2. Android Weekly Notes Issue #223

    Android Weekly Issue #223 September 18th, 2016 Android Weekly Issue #223 本期内容包括: Offline时间戳处理; Acces ...

  3. React Native class 后面的命名首字母需要大写

    React Native class 后面的命名首字母需要大写 否则会报Expeted a component class,got [object Object].

  4. Linux用户态和内核态

    究竟什么是用户态,什么是内核态,这两个基本概念以前一直理解得不是很清楚,根本原因个人觉得是在于因为大部分时候我们在写程序时关注的重点和着眼的角度放在了实现的功能和代码的逻辑性上,先看一个例子: 1)例 ...

  5. AngularJS 过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中 AngularJS 过滤器可用于转换数据: currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase ...

  6. nodejs---修改文件名字

    D:\node\update_name目录有如下文件: 1:文件夹:icons 2:js文件:update-name.js js文件代码: // 引入fs文件处理模块var fs = require( ...

  7. RSS阅读器

    RSS阅读器(Really Simple Syndication)是一种软件/程序,实质都是为了方便地读取RSS和Atom文档.大概就是实现了订阅式阅读,推送用户感兴趣的新闻,博客等(比如等某位博主更 ...

  8. (六)Spark-Eclipse开发环境WordCount-Java&Python版Spark

    Spark-Eclipse开发环境WordCount 视频教程: 1.优酷 2.YouTube 安装eclipse 解压eclipse-jee-mars-2-win32-x86_64.zip Java ...

  9. SQL Server封闭掉 触发器递归

    SQL Server关闭掉 触发器递归SQL Server  是有一个开关, 可以关闭掉 触发器递归的.EXEC sp_dboption '数据库名字', 'recursive triggers', ...

  10. Oracle导入导出

    Oracle 10g 已经引入了数据泵(点击Data Dump)技术,这项技术和之前的exp/imp有哪些好处呢,简单的来说就是恢复和备份速度非常快: 在说明数据泵的使用方法之前,我们先来了解二者的区 ...