当前位置: 首页 > Web前端 > HTML

IndexedDB--HTML5LocalStorage

时间:2023-04-03 01:11:12 HTML

什么是IndexedDBIndexedDB是浏览器自带的轻量级NOSQL数据库。它比WebSql更高效,包括索引、事务处理和查询功能。在HTML5本地存储中,IndexedDB存储的数据最多。与webStorage的4M不同,IndexedDB存储空间是无限且永久的。为什么要用IndexedDB,因为我们老大W3C不喜欢WebSql(Sqlite)?.IE和FF都不支持WebSqlAPI。IndexedDB受到W3C的推崇。浏览器供应商的表现更好。注意:反正IndexedDB和WebSql是一样的。跪=.=)Firefox10+,Chrome23+,Opera15+iPhoneios8-ios10safari支持(X5内核不支持)AndroidX5内核支持注意:移动端有各种坑,不要像我一样在不确定之前,我们先来尝试演示一下IndexedDB在移动端的常用功能代码。由于做了一个小demo,所以暂时使用这个demo的代码。请看一下伪代码。完整的源码地址233后面会附上。Createdatabasefunctioncreatedatabase(){varresource=window.indexedDB.open("managerDB",1);//创建一个名为managerDB的数据库,编号为1resource.onsuccess=function(event){database=resource.result;//使数据库在Access中随处可用};resource.onerror=function(event){//创建数据库失败事件alert("can'tcreatedatabase,error:"+resource.error);};resource.onupgradeneeded=function(event){//第一次创建数据库,新建一个数据表,名称为managerListvardb=resource.result;varobjectStore=db.createObjectStore("managerList",{keyPath:"time"});//key是time};}数据库版本不同时会触发onupgradeneeded事件(event.oldVersion可以获取当前数据库版本),可用于升级数据库(新增、删除数据表),当请求的数据库不存在时也会触发该事件,并自动创建一个空数据库。存储数据如果通过调用put()添加的数据与现有数据具有相同的键,浏览器将用新数据替换现有数据。functionsave(){varcontact=newObject();//创建一个新对象varName=document.getElementById("name").value;var时间=getSelect();varDescription=document.getElementById("description").value;if(JTrim(Name)!=""&&JTrim(Description)!=""){//JTrim()函数用于判断输入是否为空contact.name=Name;contact.time=时间;contact.description=描述;vartransaction=database.transaction(["managerList"],"readwrite");//读写varresource=transaction.objectStore("managerList").put(contact);//使用put()存储数据}else{alert("你应该写点东西...");返回;}resource.onsuccess=function(event){//成功提示("创建笔记成功!");};resource.onerror=function(event){//failurealert("can'tcreatedatabase,error:"+resource.error);//通知错误};}JTrim()functionfunctionJTrim(s){returns.replace(/(^\s*)|(\s*$)/g,"");}遍历所有数据使用IndexedDBAPI遍历数据时,需要使用游标,熟悉数据库应该清楚游标的用法functionloadAll(){vartransaction=database.transaction(["managerList"],"readonly");varresource=transaction.objectStore("managerList").openCursor();变量str="";varresult=document.getElementById("container-2");resource.onsuccess=function(event){//创建游标varcursor=event.target.result;//使用游标遍历数据if(cursor){varlist=cursor.value;varstr+=列表时间;cursor.continue();//继续循环}else{//游标循环到最后,打印出stralert(str);//这里我们可以获取list.time的值}};resource.onerror=function(event){//给出错误提示("can'tcreatedatabase,error:"+resource.error);};}查询单个数据functionsearch(element){vardescription=element.getAttribute("value");vartransaction=database.transaction(["managerList"],"readonly");//只读varobjectStore=transaction.objectStore("managerList");var请求=objectStore.得到(description);//使用get()方法找到这条数据request.onerror=function(event){alert("error::"+request.error);};request.onsuccess=function(event){varb=request.result;alert(b.description);//终于得到了这条数据的描述部分};}deletedatafunctiondel(){varresource=document.getElementById("container-2");varb=资源。getElementsByTagName("输入");vardiv=document.getElementById("container-2");变种结果=0;for(vari=0;i