js IndexedDB：浏览器端数据库的demo实例
IndexedDB具有以下特点。
（1）键值对储存。 IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是独一无二的，不能有重复，否则会抛出一个错误。
（2）异步。 IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与localStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
（3）支持事务。 IndexedDB支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。
（4）同域限制 IndexedDB也受到同域限制，每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。
（5）储存空间大 IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。
（6）支持二进制储存。 IndexedDB不仅可以储存字符串，还可以储存二进制数据。
目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持这个API，但是Safari完全不支持。
<!DOCTYPE html>
<html>
<head>
<title>indexedDB：浏览器端数据库 </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://www.xueersi.com/lib/jQuery/1.11.1/jquery.min.js?1458897912"></script>
<style type="text/css">
ul,li{
list-style: none;
float: left;
width: 100%;
}
</style>
</head>
<body>
<button id="add">添加数据</button>
<button id="get">获取数据</button>
<button id="delete">删除一条数据</button>
<button id="updata">更新数据</button>
<button id="clear">清空object store</button>
<ul id="display"></ul>
</body>
</html>
<script type="text/javascript">
//ie浏览器需要在测试环境中才能运动
const customerData = [
{ ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
{ ssn: "6-66-66", name: "duxinli", age: 38, email: "duxinli@home.org" }
];
const dbName = "test_duxinli_DB";
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 错误处理程序在这里。
};
var db;
request.onupgradeneeded = function(event) {
db = event.target.result;
// 创建一个对象存储空间来持有有关我们客户的信息。
// 我们将使用 "ssn" 作为我们的 key path 因为它保证是唯一的。
var objectStore = db.createObjectStore("customers", { keyPath: 'ssn', autoIncrement: true });
// 创建一个索引来通过 name 搜索客户。
// 可能会有重复的，因此我们不能使用 unique 索引。
objectStore.createIndex("name", "name", { unique: false });
// 创建一个索引来通过 email 搜索客户。
// 我们希望确保不会有两个客户使用相同的 email 地址，因此我们使用一个 unique 索引。
objectStore.createIndex("email", "email", { unique: false });
// 在新创建的对象存储空间中保存值
for (var i in customerData) {
objectStore.add(customerData[i]);
}
};
request.onsuccess = function(e) {
console.log("Success!");
db = e.target.result;
}
request.onerror = function(e) {
console.log("Error");
console.dir(e);
}
//获取数据
function displayPubList() {
$('#display').empty();
var tx = db.transaction('customers', 'readonly');
var store = tx.objectStore('customers');
var req;
req = store.count();
console.log(req)
req.onsuccess = function(evt) {
console.log(evt.target.result)
};
req.onerror = function(evt) {
console.error("add error", this.error);
};
req.onerror = function(evt) {
console.error("add error", this.error);
displayActionFailure(this.error);
};
req = store.openCursor();
req.onsuccess = function(evt) {
var cursor = evt.target.result;
if(cursor){
var result = evt.target.result.value;
var val = result.ssn + "~~~~~~~~"+ result.name + "~~~~~~~~"+ result.age + "~~~~~~~~"+ result.email;
$('#display').append('<li>'+ val+'</li>')
cursor.continue();
}
}
}
function addPublication() {
if (!db) {
return;
}
//点击快了i相同就会报错，ssn键值不能相同
var i = Date.parse(new Date()).toString().substr(0,10);
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.add({ ssn: "8-88-88-"+i, name: "xiaohong"+i, age: 40, email: "xiaohong-"+i+"-@home.org" });
req.onsuccess = function (evt) {
displayPubList();
};
req.onerror = function() {
console.error("add error", this.error);
};
}
$(function(){
$('#get').click(function(){
displayPubList();
})
$('#add').click(function(){
addPublication();
})
$('#delete').click(function(evt) {
var k = '444-44-4444';
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.get(k);
req.onsuccess = function(evt) {
var record = evt.target.result;
if (typeof record != 'undefined') {
req = store.delete(k);
}
displayPubList();
};
req.onerror = function (evt) {
console.error("delete:", evt.target.errorCode);
};
});
//更新数据
$('#updata').click(function(){
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
var req = store.get('555-55-5555');
req.onsuccess=function(e){
var student=e.target.result;
if(typeof record != 'undefined'){
student.age=26;
student.name="hanjinshan";
student.email="hanjinshan@home.org";
store.put(student);
}
displayPubList();
};
});
//删除数据仓库
$('#clear').click(function(){
var tx = db.transaction('customers', 'readwrite');
var store = tx.objectStore('customers');
store.clear();
displayPubList();
})
/*调用数据库实例的deleteObjectStore方法可以删除一个object store，这个就得在onupgradeneeded里面调用了
if(db.objectStoreNames.contains('students')){
db.deleteObjectStore('customers');
}*/
})
</script>
js IndexedDB：浏览器端数据库的demo实例的更多相关文章
- html5 浏览器端数据库
为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage — 本地存储 可 ...
- HTML 5浏览器端数据库
HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...
- [转] js在浏览器端对二进制流进行AES加密和解密
开始解密 简单了解一下所用的的AES加密算法,我们用的是AES的CFB加密方式,服务端会提供给我一个key和iv的二进制字节串.密文也是二进制字节串. 我用的加密/解密插件: crypto-js 一般 ...
- 遵循amd规范的require.js(适合浏览器端)
1. 下载require.js 2. 引用 html <!DOCTYPE html> <html lang="en"> <head> <m ...
- 浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
- 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)
Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...
- Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例
Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...
- JS神经网络deeplearn.js:浏览器端机器智能框架
JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...
- 如何让Node.js运行在浏览器端
Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...
随机推荐
- (转)linux服务器安全配置攻略
引言: 最小的权限+最少的服务=最大的安全 所以,无论是配置任何服务器,我们都必须把不用的服务关闭.把系统权限设置到最小话,这样才能保证服务器最大的安全.下面是CentOS服务器安全设置,供大家参考. ...
- 自动升级系统OAUS的设计与实现（续） （附最新源码）
(最新OAUS版本请参见:自动升级系统的设计与实现(续2) -- 增加断点续传功能) 一.缘起 自从 自动升级系统的设计与实现(源码) 发布以后,收到了很多使用者的反馈,其中最多的要求就是希望OAUS ...
- Spring AOP简述
使用面想对象(Object-Oriented Programming,OOP)包含一些弊端,当需要为多个不具有继承关系的对象引入公共行为时,例如日志,安全检测等.我们只有在每个对象中引入公共行为,这样 ...
- 将整数转换成二进制的java小程序
首先我们知道,将整数转换成二进制是将整数除二取余将最后除得的数和得到的余数从下向上写,组成得到的二进制数. java程序实现如下: public class ChangeToErjinzhi { pu ...
- Oracle存在修改，不存在插入记录
接触编程以来,在数据存储方面一直用的MS SQL.Oracle这名字对我来说是如此的熟悉,但是对其内容却很陌生,最近公司的一个项目用起了Oracle,所以也开始高调的用起了Oracle.在没有接触Or ...
- Oracle 权限（grant、revoke）
200 ? "200px" : this.width)!important;} --> 数据库版本:11GR2 一.介绍 在oracle中没有其他数据库系统中的数据库的概念, ...
- C#Light 再推荐，顺便介绍WP8 功能展示项目
由于在项目中验证了C#Light脚本,C#Light的健壮和稳定程度已经得到了很大的提升. 现在可以更好的把C#Light介绍给大家使用,同时也有更多的自信,告诉大家这是一个已经具有商业价值的类库. ...
- [nRF51822] 5、 霸屏了——详解nRF51 SDK中的GPIOTE（从GPIO电平变化到产生中断事件的流程详解）
:由于在大多数情况下GPIO的状态变化都会触发应用程序执行一些动作.为了方便nRF51官方把该流程封装成了GPIOTE,全称:The GPIO Tasks and Events (GPIOTE) . ...
- 我心中的核心组件（可插拔的AOP）~第五回 消息组件
回到目录 之所以把发消息拿出来,完全是因为微软的orchard项目,在这个项目里,将公用的与领域无关的功能模块进行抽象,形成了一个个的组件,这些组件通过引用和注入的方式进行工作,感觉对于应用程序的扩展 ...
- js笔记——js数据类型转换
以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『数据类型转换』,以做备忘.更多内容请查看原文. JavaScript是一种动态类型语言,变量 ...