indexedDB是H5规范里的浏览器内置数据库,是nosql数据库的一种。因为另一种数据库Web SQL不再受W3C支持,所以还得学习下这个。

基本情况

  1. 兼容性:ie11及以上都支持,
  2. W3C是这么说的
  3. 调试的时候个人觉得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的更多相关文章

  1. 浏览器内置Console函数使用详解

    浏览器内置Console函数比较好用:Chrome 和 FireFox(Firebug插件) 利用此功能可以像直接在面板里面运行JS一样(写法不同而已) 一.显示信息的命令 Firebug内置一个co ...

  2. 一、hive安装(内置数据库derby)

    hive是一个数据仓库工具,建立在hadoop之上,它的存在是为了让大数据的查询和分析更加的方便.hive提供简单的sql查询功能,并最终转换为mapreduce任务执行. 一.环境 JDK1.8+官 ...

  3. mysql内置数据库

    1 mysql本地连接数据库 >mysql -h localhost -u root -proot    注意-p后面没有空格,是直接跟上密码 或者 >mysql -h localhost ...

  4. 浏览器内置的base64方法

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.在Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科: ...

  5. AgileBoot - 如何集成内置数据库H2和内置Redis

    本项目地址: github: https://github.com/valarchie/AgileBoot-Back-End gitee: https://gitee.com/valarchie/Ag ...

  6. 现代浏览器内置的可等效替代jQuery的功能

    jQuery的体积在不断的增大.新功能要不断增加,这是必然结果.虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的.当然,jQuery不是铁板一块, ...

  7. WeixinJSBridge:微信浏览器内置JavaScript 对象

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...

  8. 几种主流浏览器内置http抓包工具软件使用方法

    对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...

  9. 几种主流浏览器内置http抓包工具软件使用方

    对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...

随机推荐

  1. [leetcode]103. Binary Tree Zigzag Level Order Traversal二叉树Z字形层序遍历

    相对于102题,稍微改变下方法就行 迭代方法: 在102题的基础上,加上一个变量来判断是不是需要反转 反转的话,当前list在for循环结束后用collection的反转方法就可以实现反转 递归方法: ...

  2. [leetcode]49. Group Anagrams重排列字符串分组

    是之前的重排列字符串的延伸,判断是重排列后存到HashMap中进行分组 这种HashMap进行分组的方式很常用 public List<List<String>> groupA ...

  3. python-使用python获取一段录音

    需要安装pyaudio库. 直接上代码: import pyaudio import wave AUDIO_FILE = '录音文件.wav' def get_audio(filepath, audi ...

  4. Spring—SSJ集成&声明式事务管理

    1.   课程介绍 1.  SSJ集成;(掌握) 2.  声明式事务管理;(掌握) 什么是三大框架 2.1.  ssh Struts/Struts2 Spring Hibernate 2.2.  ss ...

  5. Redis性能篇(二)CPU核和NUMA架构的影响

    Redis被广泛使用的一个很重要的原因是它的高性能.因此我们必要要重视所有可能影响Redis性能的因素.机制以及应对方案.影响Redis性能的五大方面的潜在因素,分别是: Redis内部的阻塞式操作 ...

  6. mysql锁类型

    mysql锁类型 问题 都有哪些锁 锁与隔离级别的关系 sql语句中涉及都涉及哪些锁 事务中,锁何时释放 死锁检测机制 概要

  7. java集合并发操作异常解决方法:CopyOnWriteArrayList

    一.我们知道ArrayList是线程不安全的,请编写一个不安全的案例并给出解决方案 HashSet与ArrayList一致 HashMap HashSet底层是一个HashMap,存储的值放在Hash ...

  8. python实现域名注册查询

    author:摘繁华-蓝白社区 联合出品 域名生成与查询 文件说明: [x] .py源文件 [x] .exe可执行文件 [x] .config.json配置文件 ps: .exe和config.jso ...

  9. SIGGRAPH Asia 2020 电脑动画节(CAF)获奖短片出炉!

    电脑动画节(CAF) 是SIGGRAPH Asia盛会最受瞩目的环节之一.2020年12月15日,SIGGRAPH Asia 2020虚拟线上会议正式宣布了电脑动画节的三部获奖短片:最佳作品奖< ...

  10. Ansible-playbook 安装redis

    Ansible-playbook 安装redis 创建目录: ### 创建剧本规范目录: mkdir -p /etc/ansible/roles/redis/{files,templates,vars ...