热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

html5怎样操作indexedDB

这次给大家带来html5怎样操作indexedDB,html5操作indexedDB的注意事项有哪些,下面就是实战案例,一起来看一下。
这次给大家带来html5怎样操作indexedDB,html5操作indexedDB的注意事项有哪些,下面就是实战案例,一起来看一下。

indexedDB是存储大量结构化数据的API,demo中用到的是异步API,麻烦的就是所有对indexedDB的操作都会发生一个异步的‘请求’,只要熟悉了API操作起来也很简单。

大体流程是这样

1.打开数据库

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   
  
if ('webkitIndexedDB' in window) {   
    window.IDBTransaction = window.webkitIDBTransaction;   
    window.IDBKeyRange = window.webkitIDBKeyRange;   
}   
//这个就不解释了   
  
var request = indexedDB.open("adsageIDB");  //open  : indexedDB只有这一个方法  打开(数据库名)   
request.Onsuccess= function(e) { //异步   
    var v = "1.00";   
    var db = e.target.result;   
  
    if (v!= db.version) {   
        var setVrequest = db.setVersion(v);   
        setVrequest.Onsuccess= function(e) { //异步   
            if(db.objectStoreNames.contains("todo")) {   
                db.deleteObjectStore("todo");   
            }   
            var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创建ObjectStore  暂时用到两个参数,数据库&&主键   
        }   
    }       
}

这样就 创建/连接 了一个数据库

2.创建交互对象 && 监听dom事件 && 处理数据

然后就是要操作数据库了

//插入数据 暂时只插入一列    
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction    
var store = trans.objectStore("todo");//创建Store   
//要操作数据必须建立transaction 和 Store   
  
var data = {   
    "text": todoText,   
    "adsid": new Date().getTime()   
};//一个小数据 adsid是主键   
  
var request = store.put(data); //‘强行’插入   
  
request.Onsuccess= function(e) {   
    //成功后执行一些操作   
};   
  
request.Onerror= function(e) {   
    console.log("Error Adding: ", e);   
};  
//读取数据   
var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
var store = trans.objectStore("todo");   
  
var keyRange = IDBKeyRange.lowerBound(0);   
var cursorRequest = store.openCursor(keyRange);   
//这里用到指针cursor ,openCursor的参数 keyRange是遍历范围 还可以添加遍历方向参数   
//另一种方法是get() 这个就比较简单了直接store.get('键值')就行   
  
cursorRequest.Onsuccess= function(e) {   
    var result = e.target.result;   
    if(!!result == false)   
    return;   
  
    console.log(result.value);   
    result.continue(); //循环读取所有数据   
};  
//删除数据   
...   
store.delete('键值')   
...  
  
  
    
      
    
    
    

    相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!

    相关阅读:

    12个冷门的H5设计小技巧

    H5的通用接口详细介绍

    H5怎样用绘制五角星

    以上就是html5怎样操作indexedDB的详细内容,更多请关注其它相关文章!


    推荐阅读
    author-avatar
    N个小灰流_701
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有