HTML5 indexedDB数据库的入门学习(一)

时间:2023-01-17 17:38:10

笔者早些时间看过web sql database,但是不再维护和支持,所以最近初步学习了一下indexedDB数据库,首先indexedDB(简称IDB)和web sql database有很大的差别,因为IDB不像web sql database那样用数据库语句去操作浏览器本地数据库(有过数据库基础看起来会比较容易),及关系数据库,IDB更像是NoSQL数据库,不能使用sql语句去查询,所以理解上会比web sql database要难一点:下面我主要介绍indexedDB数据库的基本操作:增删改差

首先:获取indexedDB数据库对象

 if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}

然后打开数据库(如果数据库不存在当然就是创建数据库)

 var request = indexedDB.open("data2",1);
var db;

第一个参数是数据库的名称,第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。

 request.onupgradeneeded = function(event) {
db = event.target.result;
var store = db.createObjectStore("table",{keyPath: "ssn"});
console.log("createObjectStore success!");
};
request.onsuccess = function (event) {
db = event.target.result; //db = request.result;或者db = this.result;
}

但你增加数据库版本号时,会触发onupgradeneeded事件,这时可能会出现成功、失败和阻止事件三种情况

onupgradeneeded事件在第一次打开页面初始化数据库时会被调用,或在当有版本号变化时。所以,你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化,而且页面之前被打开过,你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接,则会触发onblocked事件。

做完上面的操作后你就可以进行增删改查的操作了:

1、添加数据:

 document.getElementById("add").onclick = function (){
var obj = {
"ssn" : document.getElementById("ssn").value,
"name" : document.getElementById("name").value,
"email" : document.getElementById("email").value
};
//存数据 db为数据库对象,transaction为事物,objectStore为存储对象(相当于数据表),add为数据表对象的add方法,最后是add成功的回调函数
db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
console.log("add data success!");
};
}

2、删除数据:

 document.getElementById("del").onclick = function() {
//删除数据
db.transaction(["table"], "readwrite")
.objectStore("table")
.delete(document.getElementById("del_ssn").value)
.onsuccess = function(event) {
console.log(document.getElementById("del_ssn").value+" delete sucecess");
};
}

3、读取数据:

 document.getElementById("get").onclick = function() {
//读数据 openCursor相当于是循环读取
db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
var getString = "";
var cursor = event.target.result;
if (cursor) {
getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
cursor.continue();
//alert(getString);
}
document.getElementById("get_ssn").innerHTML += getString+"<br/>";
}
}

4、修改数据:

 document.getElementById("put").onclick = function () {
var obj = {
"ssn" : document.getElementById("putssn").value,
"name" : document.getElementById("putname").value,
"email" : document.getElementById("putemail").value
};
//修改数据
db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
console.log("put data success!");
};
}

以下是面页的html部分:

 <input type="text" id="ssn" name="ssn" />
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<button id="add">增加</button>
<button>重置</button><br/> <input type="text" id="putssn" name="putssn" />
<input type="text" id="putname" name="putname" />
<input type="text" id="putemail" name="putemail" />
<button id="put">修改</button><br/> <input type="text" id="del_ssn" name="del_ssn" />
<button id="del">删除</button><br/>
<button id="get">读取</button>
<div id="get_ssn"></div>

初学indexedDB,有什么不对的地方望指出,后续会把比较深入的东西写出来和大家分享

整个demo文件如下:

 <!DOCTYPE html>
<html>
<head>
<title>indexedDB</title>
</head>
<script type="text/javascript">
window.onload = function () {
if (!window.indexedDB) {
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
}
var request = indexedDB.open("data",1);
var db;
request.onupgradeneeded = function(event) {
db = event.target.result;
var store = db.createObjectStore("table",{keyPath: "ssn"});
console.log("createObjectStore success!");
};
request.onsuccess = function (event) {
db = event.target.result;
//读取数据
/*db.transaction(["table"], "readwrite").objectStore("table").get("1212").onsuccess = function () {
console.log(this.result.name);
}; */
}
document.getElementById("add").onclick = function (){
var obj = {
"ssn" : document.getElementById("ssn").value,
"name" : document.getElementById("name").value,
"email" : document.getElementById("email").value
};
//存数据
db.transaction(["table"], "readwrite").objectStore("table").add(obj).onsuccess = function(event) {
console.log("add data success!");
};
}
document.getElementById("del").onclick = function() {
//删除数据
db.transaction(["table"], "readwrite")
.objectStore("table")
.delete(document.getElementById("del_ssn").value)
.onsuccess = function(event) {
console.log(document.getElementById("del_ssn").value+" delete sucecess");
};
}
document.getElementById("get").onclick = function() {
//读数据
db.transaction("table").objectStore("table").openCursor().onsuccess = function(event) {
var getString = "";
var cursor = event.target.result;
if (cursor) {
getString += "Name for SSN " + cursor.key + " is " + cursor.value.name;
console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
cursor.continue();
//alert(getString);
}
document.getElementById("get_ssn").innerHTML += getString+"<br/>";
}
} document.getElementById("put").onclick = function () {
var obj = {
"ssn" : document.getElementById("putssn").value,
"name" : document.getElementById("putname").value,
"email" : document.getElementById("putemail").value
};
//修改数据
db.transaction(["table"], "readwrite").objectStore("table").put(obj).onsuccess = function(event) {
console.log("put data success!");
};
}
}
</script>
<body>
<input type="text" id="ssn" name="ssn" />
<input type="text" id="name" name="name" />
<input type="text" id="email" name="email" />
<button id="add">增加</button>
<button>重置</button><br/> <input type="text" id="putssn" name="putssn" />
<input type="text" id="putname" name="putname" />
<input type="text" id="putemail" name="putemail" />
<button id="put">修改</button><br/> <input type="text" id="del_ssn" name="del_ssn" />
<button id="del">删除</button><br/>
<button id="get">读取</button>
<div id="get_ssn"></div>
</body>
</html>

indexedDB_demo

效果如下:

HTML5 indexedDB数据库的入门学习(一)

HTML5 indexedDB数据库的入门学习(一)的更多相关文章

  1. HTML5 indexedDB数据库的入门学习(二)

    上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...

  2. HTML5 indexedDb 数据库

    indexedDb 数据库   上一节中,我们知道了,HMTL5中内置了两种本地数据库,一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite,另一种是是被称为indexedDB 的数据 ...

  3. HTML5 进阶系列:indexedDB 数据库

    前言 在 HTML5 的本地存储中,有一种叫 indexedDB 的数据库,该数据库是一种存储在客户端本地的 NoSQL 数据库,它可以存储大量的数据.从上篇:HTML5 进阶系列:web Stora ...

  4. 【数据库】9&period;0 MySQL入门学习(九)——获得数据库和表的信息、日期计算、查询、选择特殊列

    1.0 SELECT语句用来从数据表中检索信息. SELECT what_to_select FROM which_table WHERE conditions_to_satisfy; what_to ...

  5. 【数据库】7&period;0 MySQL入门学习(七)——MySQL基本指令:帮助、清除输入、查询等

    1.0 help == ? 帮助指令,查询某个指令的解释.用法.说明等.详情参考博文: [数据库]6.0 MySQL入门学习(六)——MySQL启动与停止.官方手册.文档查询 https://www. ...

  6. 【数据库】4&period;0 MySQL入门学习(四)——linux系统环境下MySQL安装

    1.0 我的操作系统是CentOS Linux release 7.6.1810  (Core) 系统详细信息如下: Linux version 3.10.0-957.1.3.el7.x86_64 ( ...

  7. 【数据库】3&period;0 MySQL入门学习(三)——Windows系统环境下MySQL安装

    1.0 我的操作系统是window10 专业版 64位.,不过至少windows7以上系统都是一样的. 关于MySQL如何下载,请参考博文: [数据库]2.0 如何获得MySQL以及MySQL安装 h ...

  8. 突袭HTML5之SVG 2D入门1 - SVG综述&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;zzzzzzzz

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  9. opengl入门学习

    OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...

随机推荐

  1. pymol installation

    # download (1) python wget https://www.python.org/ftp/python/2.7.9/python-2.7.9.amd64.msi (2) pymol ...

  2. hmailserver

    开始使用: www.hmailserver.org 问题 让hmailserver的用户使用各自的中继来发送邮件: http://dagai.net/archives/968

  3. &lbrack;ZZ&rsqb; &lbrack;siggraph10&rsqb;color enhancement and rendering in film and game productio

    原文link:<color enhancement and rendering in film and game production> 是siggraph 2010,“Color Enh ...

  4. iOS VideoToolbox硬编H&period;265(HEVC)H&period;264(AVC):4 同步编码

    本文档描述Video Toolbox实现同步编码的办法. Video Toolbox在头文件描述了编码方式为异步,实际开发中也确实为异步. This function may be called as ...

  5. Purpose of requirePermission attribute &lpar;web&period;config&rpar;

    requirePermission 属性的含义 https://msdn.microsoft.com/en-us/library/system.configuration.sectioninforma ...

  6. 解决URL请求中的中文乱码问题

    解决URL提交中文出现乱码有两种办法:1.请求端的中字符有encodeURI进行一次转码,如: var url="/getUser?name="+encodeURI(name);服 ...

  7. 文件系统:ext4&comma;zfs测评结果

    测试环境 操作系统:ubuntu16.04 内核版本: 磁盘: 本人使用的是青云的云主机,磁盘使用的其性能型: Cpu信息: 4核 2399MHz 内存:8G 文件系统: 本人使用的是ubuntu16 ...

  8. 菜鸟装逼指南--linux内核中听过就能记住的概念

    打算给我们部门弄个内部分享.发现大家对一些底层知识的认知停留在一句一句的,比如听说JVM使用-XX:-UseBiasedLocking取消偏向锁可以提高性能,因为它只适用于非多线程高并发应用.使用数字 ...

  9. javascript选项卡切换样式

    HTML代码 <ul class="touzi_xuan1" id="qixian"> <li>****: </li> &l ...

  10. Luogu4173 残缺的字符串 FFT

    传送门 考虑如何使用FFT计算两个子串是否匹配.如果字符集比较小可以把每个字符都拿出来暴力做一遍,但是字符集比较大的时候复杂度就会有问题.这个时候可以考虑匹配函数. 先考虑没有通配符的情况.将\(A\ ...