欢迎来到IT培训的黄埔军校——智游教育!
加入收藏
联系我们
0371-88888598 4006-371-555
Toggle navigation
首页
高端课程
Java
VR+游戏开发
Web大前端
大数据
信息安全
UI全栈设计
PHP
Python
iOS
专家师资
高薪就业
就业喜报
就业渠道
创业学员
学员专区
学员感言
学员作品
学员活动
研发中心
校企合作
入门知识库
在线精品课
技术干货
关于智游
智游简介
智游新闻
山西校区
智游论坛
首页
技术干货
HTML5知识库
HTML5知识库
java知识库
UI知识库
PHP知识库
HTML5知识库
大数据知识库
Python知识库
VR+虚幻引擎
iOS知识库
Android知识库
网络运营知识库
动画导演知识库
网络信息安全
热点新闻
梦想启航丨智游集团储备
一篇文章读懂智游教育就
智游双选会丨为了梦想,
智游教育2018年58个项目获
强强联合!智游集团与3
劳逸结合丨智游山西分公
学无止境丨智游集团、蓝
圯桥授书丨智游集团现代
热搜标签
智游
Java
大数据
HTML5
Python
专家师资
课程咨询
咨询电话:
4006-371-555
0371-88888598
微信公众号:zhiyou_group
IndexedDB--HTML5本地存储
于2017-04-07 09:19:25 发表在
HTML5知识库
什么是IndexedDB
indexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。在HTML5本地存储中,IndexedDB存储的数据是最多的,不像webStorage的4M,IndexedDB存储空间是无上限且永久的。
为什么要用IndexedDB
因为咱们的大佬W3C不喜欢Web Sql(Sqlite)啊233,大佬都已经放弃了Web Sql,力推IndexedDB
Web Sql API的主要实现者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不支持Web Sql API。
IndexedDB由于受到W3C的推崇。浏览器厂商的实现情况要好一些。
注:反正IndexedDB跟Web Sql都是半斤八两
IndexedDB的特点
1.
支持事务、游标、索引等数据库操作
2.
3.
存储空间大
4.
5.
永久存储,删除缓存不干扰IndexedDB
6.
7.
异步性
8.
各大浏览器对IndexedDB的支持情况:
·
IE10+(亲测IE10跪=.=)
·
·
Firefox 10+、Chrome 23+、Opera 15+
·
·
iPhone ios8-ios10 safari支持(X5内核不支持)
·
·
Android X5内核支持
·
注:移动端各种坑,在没什么把握之前千万别像我一样作死去弄移动端
IndexedDB常用功能代码演示
由于我是做了一个小Demo,所以暂且用这个Demo的代码,伪代码大家看看就好,后面会附上完整源码地址233
·
创建数据库
·
function
createdatabase() {
var
resource = window.indexedDB.open("managerDB",1);//创建一个名为managerDB的数据库,数量为1
resource.onsuccess =
function
(event) {
database = resource.result;//让数据库能在任何地方访问
};
resource.onerror =
function
(event) {//数据库创建失败事件
alert("can't create database,error:" + resource.error);
};
resource.onupgradeneeded =
function
(event) {//第一次创建数据库新建一张名为managerList的数据表
var
db = resource.result;
var
objectStore = db.createObjectStore("managerList",{keyPath:"time"});//key为time
};
}
onupgradeneeded事件会在数据库版本不同时触发(event.oldVersion 可以获取当前数据库版本),可以用来升级数据库(添加删除数据表),此事件也会在所请求的数据库不存在的时候触发,会自动创建一个空数据库。
·
存储数据
·
如果调用put()添加的数据与已存在的数据有相同的key,浏览器会将新数据替换已存在的数据。
function
save() {
var
contact =
new
Object();//新建一个对象
var
Name = document.getElementById("name").value;
var
Time = getSelect();
var
Description = document.getElementById("description").value;
if
(JTrim(Name) != "" && JTrim(Description) != "") {//JTrim()函数是用于判断输入是否为空值
contact.name = Name;
contact.time = Time;
contact.description = Description;
var
transaction = database.transaction(["managerList"],"readwrite");//读写
var
resource = transaction.objectStore("managerList").put(contact);//利用put()将数据存入
}
else
{
alert("you should write something...");
return
;
}
resource.onsuccess =
function
(event) {//成功
alert("create note success!");
};
resource.onerror =
function
(event) {//失败
alert("can't create database,error:" + resource.error);//告知错误
};
}
JTrim()函数
function
JTrim(s) {
return
s.replace(/(^\s*)|(\s*$)/g, "");
}
。
遍历全部数据
利用IndexedDB的API来遍历数据的时候,需要用到游标,熟悉数据库的各位应该清楚游标的用法
function
loadAll
() {
var
transaction = database.transaction(["managerList"],"readonly");
var
resource = transaction.objectStore("managerList").openCursor();
var
str = "";
var
result = document.getElementById("container-2");
resource.onsuccess =
function
(event) {
//创建游标
var
cursor = event.target.result;
//利用游标对数据进行遍历
if
(cursor) {
var
list
= cursor.value;
var
str +=
list
.time;
cursor.
continue
();//继续循环
}
else
{//游标循环到底之后,打印出str
alert(str);//在这里我们就能得出list.time的值了
}
};
resource.onerror =
function
(event) {//出现错误给出提示
alert("can't create database,error:" + resource.error);
};
}
·
查询单条数据
·
function
search(element) {
var
description = element.getAttribute("value");
var
transaction = database.transaction(["managerList"], "readonly");//只读
var
objectStore = transaction.objectStore("managerList");
var
request = objectStore.get(description);//利用get()方法找到这条数据
request.onerror =
function
(event) {
alert("error::" + request.error);
};
request.onsuccess =
function
(event) {
var
b = request.result;
alert(b.description);//最终得到这条数据的description部分
};
}
·
删除数据
·
function
del() {
var
resource = document.getElementById("container-2");
var
b = resource.getElementsByTagName("input");
var
div = document.getElementById("container-2");
var
result = 0;
for
(
var
i = 0;i < b.length;i ++) {
if
(b[i].checked == true) {
var
time = b[i].value;
var
transaction = database.transaction(["managerList"], "readwrite");//读写
var
objectStore = transaction.objectStore("managerList");
var
request = objectStore.delete(time);//删除数据的核心就是利用delete方法
request.onerror =
function
(event) {
alert("error:" + request.error);
};
request.onsuccess =
function
(event) {
alert("delete note success!");
};
}
}
}
·
删除整个数据库
·
IndexDB只能在控制台里面删除数据,并不能删除数据表及数据库,所以删除只能代码执行
window.indexedDB.deleteDatabase("数据库名称");
DEMO演示
Demo地址
(出现bug请移步pc)
4006-371-555