摘要:相比更加高效,包括索引事务处理和查询功能。在本地存储中,存储的数据是最多的,不像的,存储空间是无上限且永久的。由于受到的推崇。存储数据如果调用添加的数据与已存在的数据有相同的,浏览器会将新数据替换已存在的数据。
什么是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
异步性
各大浏览器对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)
pc端偶尔会因为代码仓库的原因出现莫名bug,方便的话可以clone源码
地址在这里:git@git.oschina.net:huangxizhou/indexDB.git
最后祝大家新年快乐!!!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86754.html
摘要:相比更加高效,包括索引事务处理和查询功能。在本地存储中,存储的数据是最多的,不像的,存储空间是无上限且永久的。由于受到的推崇。存储数据如果调用添加的数据与已存在的数据有相同的,浏览器会将新数据替换已存在的数据。 什么是IndexedDB indexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。在HTML5本地存储中,In...
摘要:相比更加高效,包括索引事务处理和查询功能。在本地存储中,存储的数据是最多的,不像的,存储空间是无上限且永久的。由于受到的推崇。存储数据如果调用添加的数据与已存在的数据有相同的,浏览器会将新数据替换已存在的数据。 什么是IndexedDB indexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。在HTML5本地存储中,In...
摘要:是手机端关系型数据库的最佳方案,各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范,但不是基于,而是基于对象。与的标准相比,的扩展主要是为了跨域。有网友封装了一个框架,针对数据,在超过时自动切换到,参考。 总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案:cookie、localstorage、sessionstorage、w...
摘要:是手机端关系型数据库的最佳方案,各种手机都支持。但是目前手机端重量数据存储的唯一可商用方案。是里最新的数据存储规范,但不是基于,而是基于对象。与的标准相比,的扩展主要是为了跨域。有网友封装了一个框架,针对数据,在超过时自动切换到,参考。 总结HTML5+的离线本地存储的多种方案: [ √ ] HTML5标准方案:cookie、localstorage、sessionstorage、w...
阅读 680·2023-04-25 22:13
阅读 2309·2019-08-30 15:56
阅读 2180·2019-08-30 11:21
阅读 613·2019-08-30 11:13
阅读 1985·2019-08-26 14:06
阅读 1914·2019-08-26 12:11
阅读 2242·2019-08-23 16:55
阅读 498·2019-08-23 15:30