HTML5 使用浏览器内置数据库之 indexedDB
indexedDB是H5规范里的浏览器内置数据库,是nosql数据库的一种。因为另一种数据库Web SQL不再受W3C支持,所以还得学习下这个。
基本情况
- 兼容性:ie11及以上都支持,
- W3C是这么说的
- 调试的时候个人觉得firefox最方便
示例代码
html代码:
<form>
userId:<input type="text" name="uid" id="uId"/><br/>
userName:<input type="text" name="uname" id="uName"/><br/>
email:<input type="email" name="uemail" id="uEmail"/><br/> <br/>
<input type="button" value="Add" id="addBut"/>
<input type="button" value="Delete" id="delBut"/>
<input type="button" value="Update" id="updateBut"/>
<input type="button" value="Search" id="searBut"/>
</form>
<hr/>
<button id='showAll'>Show All</button>
<table width="60%">
<tr>
<td width="10%">uid</td>
<td width="20%">uname</td>
<td width="30%">uemail</td>
</tr>
</table>
<table class="desc" width="60%">
</table>
js代码:
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
//判断浏览器是否支持indexedDB
window.indexedDB = window.indexedDB || window.mozIndexedDB
|| window.webkitIndexedDB || window.msIndexedDB;
if (window.indexedDB) { //如果支持
console.log("支持");
//创建请求打开数据库,不能直接打开。demoDB是数据库名;3是版本号。
var request = window.indexedDB.open('demoDB', 3);
var db;
//onupgradeneeded事件:第一次打开页面初始化数据库时,或在当有版本号变化时调用。
request.onupgradeneeded = function (event) {
db = event.target.result;
//创建一个存储,名称为user
var objectStore = db.createObjectStore('user', {keyPath:'uid'});
// 创建一个email索引。不能有相同的 email 地址,所以使用一个 unique 索引。
objectStore.createIndex("uemail", "uemail", {unique:true});
console.log('运行onupgradeneeded... :)');
};
//成功回调
request.onsuccess = function (event) {
db = event.target.result;
console.log('创建(请求)数据库成功 :)');
};
//失败回调
request.onerror = function (event) {
console.log('创建(请求)数据库出错 :(', event);
};
} else {//如果不支持
console.log('The browser does not support indexedDB :)')
}
//增
$('#addBut').click(function () {
var uidVal = $('#uId').val();
var unameVal = $('#uName').val();
var emailVal = $('#uEmail').val();
//首先需要创建一个事务,具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行
var transaction = db.transaction(['user'], 'readwrite');
var objectStore = transaction.objectStore('user').add({uid:uidVal, uname:unameVal, uemail:emailVal});
transaction.oncomplete = function (event) {
console.log('新记录增加成功 :)');
};
transaction.onerror = function (event) {
console.log('新记录增加出错 :(', event);
}
});
//删
$('#delBut').click(function () {
var uidVal = $('#uId').val();
var request = db.transaction(['user'], 'readwrite').objectStore('user').delete(uidVal);
request.onsuccess = function (event) {
console.log('数据删除成功 :)');
};
request.onerror = function (event) {
console.log('删除出错 :(', event);
//console.log('删除出错 :(',event.target.errorCode);
};
});
//改
$('#updateBut').click(function () {
var uidVal = $('#uId').val();
var unameVal = $('#uName').val();
var emailVal = $('#uEmail').val();
var request = db.transaction(['user'], 'readwrite').objectStore('user').put({
uid:uidVal,
uname:unameVal,
uemail:emailVal
});
request.onsuccess = function (event) {
console.log('修改成功 :)');
};
request.onerror = function (event) {
console.log('修改出错 :(');
}
});
//查
$('#searBut').click(function () {
var uidVal = $('#uId').val();
var transaction = db.transaction(['user'], 'readwrite');
var objectStore = transaction.objectStore('user').get(uidVal);
objectStore.onsuccess = function (event) {
$('#uName').val(objectStore.result.uname);
$('#uEmail').val(objectStore.result.uemail);
console.log('查询成功 :)');
};
objectStore.onerror = function (event) {
console.log('查询出错 :(', event.target.errorCode);
}
});
//查 取出所有数据
$('#showAll').click(function () {
var str = '';
var transaction = db.transaction(['user']);
var objectStore = transaction.objectStore('user');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
str += '<tr><td with="10%">' + cursor.key + '</td><td with="20%">' + cursor.value.uname + '</td><td with="30%">' + cursor.value.uemail + '</td></tr>';
$('.desc').html(str);
cursor.continue();
} else {
// console.log('No more datas... :(');
}
}
});
});
</script>
HTML5 使用浏览器内置数据库之 indexedDB的更多相关文章
- 浏览器内置Console函数使用详解
浏览器内置Console函数比较好用:Chrome 和 FireFox(Firebug插件) 利用此功能可以像直接在面板里面运行JS一样(写法不同而已) 一.显示信息的命令 Firebug内置一个co ...
- 一、hive安装(内置数据库derby)
hive是一个数据仓库工具,建立在hadoop之上,它的存在是为了让大数据的查询和分析更加的方便.hive提供简单的sql查询功能,并最终转换为mapreduce任务执行. 一.环境 JDK1.8+官 ...
- mysql内置数据库
1 mysql本地连接数据库 >mysql -h localhost -u root -proot 注意-p后面没有空格,是直接跟上密码 或者 >mysql -h localhost ...
- 浏览器内置的base64方法
Base64是一种基于64个可打印字符来表示二进制数据的表示方法.在Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科: ...
- AgileBoot - 如何集成内置数据库H2和内置Redis
本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...
- 现代浏览器内置的可等效替代jQuery的功能
jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...
- WeixinJSBridge:微信浏览器内置JavaScript 对象
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
- 几种主流浏览器内置http抓包工具软件使用方法
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
- 几种主流浏览器内置http抓包工具软件使用方
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
随机推荐
- [leetcode]103. Binary Tree Zigzag Level Order Traversal二叉树Z字形层序遍历
相对于102题,稍微改变下方法就行 迭代方法: 在102题的基础上,加上一个变量来判断是不是需要反转 反转的话,当前list在for循环结束后用collection的反转方法就可以实现反转 递归方法: ...
- [leetcode]49. Group Anagrams重排列字符串分组
是之前的重排列字符串的延伸,判断是重排列后存到HashMap中进行分组 这种HashMap进行分组的方式很常用 public List<List<String>> groupA ...
- python-使用python获取一段录音
需要安装pyaudio库. 直接上代码: import pyaudio import wave AUDIO_FILE = '录音文件.wav' def get_audio(filepath, audi ...
- Spring—SSJ集成&声明式事务管理
1. 课程介绍 1. SSJ集成;(掌握) 2. 声明式事务管理;(掌握) 什么是三大框架 2.1. ssh Struts/Struts2 Spring Hibernate 2.2. ss ...
- Redis性能篇(二)CPU核和NUMA架构的影响
Redis被广泛使用的一个很重要的原因是它的高性能.因此我们必要要重视所有可能影响Redis性能的因素.机制以及应对方案.影响Redis性能的五大方面的潜在因素,分别是: Redis内部的阻塞式操作 ...
- mysql锁类型
mysql锁类型 问题 都有哪些锁 锁与隔离级别的关系 sql语句中涉及都涉及哪些锁 事务中,锁何时释放 死锁检测机制 概要
- java集合并发操作异常解决方法:CopyOnWriteArrayList
一.我们知道ArrayList是线程不安全的,请编写一个不安全的案例并给出解决方案 HashSet与ArrayList一致 HashMap HashSet底层是一个HashMap,存储的值放在Hash ...
- python实现域名注册查询
author:摘繁华-蓝白社区 联合出品 域名生成与查询 文件说明: [x] .py源文件 [x] .exe可执行文件 [x] .config.json配置文件 ps: .exe和config.jso ...
- SIGGRAPH Asia 2020 电脑动画节(CAF)获奖短片出炉!
电脑动画节(CAF) 是SIGGRAPH Asia盛会最受瞩目的环节之一.2020年12月15日,SIGGRAPH Asia 2020虚拟线上会议正式宣布了电脑动画节的三部获奖短片:最佳作品奖< ...
- Ansible-playbook 安装redis
Ansible-playbook 安装redis 创建目录: ### 创建剧本规范目录: mkdir -p /etc/ansible/roles/redis/{files,templates,vars ...