front end :indexdb

最新推荐文章于 2021-06-08 10:54:29 发布

nedwons

最新推荐文章于 2021-06-08 10:54:29 发布

阅读量206

点赞数

分类专栏： front end database

database 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

front end

6 篇文章 0 订阅

订阅专栏

thanks to the author :

http://blog.csdn.net/Rdj_MISS/article/details/51285097

//public.js 封装如下函数
//菜单，上下栏的公共操作，数据库操作

console.log("yeah, this is public.js! hello guys!");
//public varible

var Choosen_mode = true;//用于书签按钮判断页面布局格式,默认为gd模式
var Bookmarklist_num = 0;//书签编号
var Panel_bookmark_id;//面板书签列表中的每个书签块的id

function CreatePanelBookmark_div(){
    if(Choosen_mode){//a return value of mode choosen ,0 :page mode,1 scroll mode
        //setTimeout(function () {
        Panel_bookmark_id_ = Add_bookmark_scroll();//获取两个模式中添加的书签小div 的id 的返回值
        return Panel_bookmark_id_;
    }else{
        Panel_bookmark_id_ = Add_bookmark_page();
        return Panel_bookmark_id_;

    };

    return Panel_bookmark_id_;
};//end of CreatePanelBookmark_div()


//翻页模式的书签添加函数
function Add_bookmark_page(){
    var Bookmarklist_id = "Bookmark"+Bookmarklist_num;
    var Add_bookmark_id = $(Page_div_id_show_now ).attr('id');
    var Inner_Note_Bookmark_div = document.createElement('div');
    Inner_Note_Bookmark_div.setAttribute('id',Bookmarklist_id);//书签小div块的id
    $("#Note_Bookmark_div").append(Inner_Note_Bookmark_div);
    console.log(Inner_Note_Bookmark_div.id);
    // alert(Inner_Note_Bookmark_div.id);
    var yadan_id = "#"+Bookmarklist_id;
    // $(yadan_id).css("background-color","#FFCCCC");
    $(yadan_id).append("<p>"+'bookmark'+Bookmarklist_num+': '+Add_bookmark_id+"</p>");
    Bookmarklist_num++;
    console.log("add bookmark: "+Add_bookmark_id+" succeed!" );
    return yadan_id;
};//end of Add_bookmark_page(e)


//滚动模式的书签添加函数
function Add_bookmark_scroll(){
    var Bookmarklist_id = "Panel_Bookmark"+Bookmarklist_num;
    var Inner_Note_Bookmark_div = document.createElement('div');
    Inner_Note_Bookmark_div.setAttribute('id',Bookmarklist_id);//书签小div块的id            
    $("#Panel_Bookmark_board").append(Inner_Note_Bookmark_div);
    var yadan_id = "#"+Bookmarklist_id;
    $(yadan_id).css({"background-color":"#FFCCCC",
                    "height":"10%",
                    "font-size": "1.6em"
    });//seting the style of bookmark div
    // $(Bookmarklist_id).css('height','10%');
    $(yadan_id).append("<p >"+'bookmark'+Bookmarklist_num+': '+yadan_id+"</p>");
    Bookmarklist_num++;
    console.log("add bookmark: "+yadan_id+" succeed!" );
    return yadan_id;
};//end of Add_bookmark_scroll()



//database 数据库部分
function initDB(name, db_version) {
    window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
    if(window.indexedDB){
        //alert("您的浏览器支持IndexedDB数据库。");
    } else{
        alert("您的浏览器不支持IndexedDB数据库。");
    };

    //1、打开或创建数据库
    request=window.indexedDB.open('Bookmark_Note_DB','1.0');//参数为：数据库名和版本号；数据库存在，则打开它；否则创建。

    //2、指定操作成功的处理函数(可以获得对象存储空间信息)
    request.onsuccess=function(event){
        console.log('打开成功！');
        mydb=request.result;
        //console.log(mydb);
        //var len = mydb.objectStoreNames.length;                 //对象存储空间名的个数
        //var  name=mydb.objectStoreNames[i];                     //对象存储空间名
    };

    //3、指定操作失败的处理函数
    request.οnerrοr=function(event){
        alert("打开失败,错误号：" + event.target.errorCode);
    };

    //4、onupgradeneeded事件在下列情况下被触发：数据库第一次被打开时；打开数据库时指定的版本号高于当前被持久化的数据库版本号。(可通过修改版本号触发该事件)
    request.onupgradeneeded = function(event) {
        mydb=request.result;//获得数据库实例对象
        if(!mydb.objectStoreNames.contains("Bookmark_Note_DB")) {                   //判断对象存储空间名称是否已经存在
            var objectStore = mydb.createObjectStore("Bookmark_Note_DB", {keyPath: "id"});//创建Bookmark_Note_DB对象存储空间;指定keyPath选项为id（即主键为id）
            //对象存储空间Bookmark_Note_DB的列email上创建一个唯一索引email,可以创建多个索引。
            objectStore.createIndex("Jump_to_doc_index_id",                                //索引名
                                    "id",                                //创建索引的列（即keyPath,索引属性字段名）
                                    { unique: true });                      //索引选项(索引属性值是否唯一:true or false)
        };
    };
}

//插入数据
function insert(mydb,data){
    //使用事务
    var transaction = mydb.transaction('Bookmark_Note_DB',                        //事务操作的对象存储空间名
                                       'readwrite');                         //事务模式:'readwrite'可读写模式;READ_ONLY只读模式;VERSION_CHANGE版本升级模式;
    //2.1、当事务中的所有操作请求都被处理完成时触发
    transaction.oncomplete = function(event) {};
    //2.2、当事务中出现错误时触发，默认的处理方式为回滚事务；
    transaction.onerror = function(event) {};
    //2.3、当事务被终止时触发
    transaction.onabort = function(event){};
    //2.4、从事务中获得相关的对象存储空间对象
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    //向Bookmark_Note_DB存储空间加入一个student对象，获得request对象用于处理用户对数据库的操作请求(同样拥有onerror，onupgradeneeded，onsuccess事件)
    var request = objStore.add(data);
    request.onsuccess = function(e) {
        alert("成功插入数据，id=" + e.target.result);
    };
}

//查询数据
function get(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var request = objStore.get("110");                 //按照id查询
    request.onsuccess=function(e){
        alert(e.target.result.name +  e.target.result.age + e.target.result.email);
    }
}

//更新数据
function update(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var request = objStore.get("110");
    request.onsuccess=function(e){
        var student=e.target.result;
        student.name='wwww1';
        objStore.put(student);
    }
}

//删除数据：
function remove(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var request = objStore.delete("110");
    request.onsuccess = function(e) {
        alert("成功删除数据");
    };
}

//利用索引查询：
function byIndexGet(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var index = objStore.index('email');                //索引名
    var request=index.get('liming1@email.com');         //通过索引值获取数据
    request.onsuccess=function(e){
        var student=e.target.result;
        alert(student.name+"：索引查询");
    }
}

//游标遍历所有：
function byCursorGet(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var request=objStore.openCursor();//打开游标
    request.onsuccess = function(e){
        var cursor = e.target.result;
        if(cursor){
            alert(cursor.value.id);
            cursor.continue();
        }else {
            alert('遍历完成');
        }
    }
}

//通过范围和排序条件，游标遍历符合条件的数据：
/**
 * 范围：
 *（1）匹配等于指定键值的记录：var range = IDBKeyRange.only(指定键值)
 *（2）匹配小于指定键值的记录：var range = IDBKeyRange.lowerBound(指定键值, 是否不包括指定键值)
 *（3）匹配大于指定键值的记录：var range = IDBKeyRange.upperBound(指定键值, 是否不包括指定键值)
 *（4）匹配指定范围内的记录：var range = IDBKeyRange.bound(下限键值，上限键值，是否不包括下限键值，是否不包括上限键值
 */
// 例如：
// 只取得当前索引的值为110的数据  
IDBKeyRange.only("110");  
// 只取得当前索引的值大于110，并且不包括110的数据  
IDBKeyRange.lowerBound("110", true);  
// 只取得当前索引的值小于110，并且包括110的数据  
IDBKeyRange.upperBound("110", false);  
// 取得当前索引的值介于110和120之间，并且包括110，但不包括120的数据  
IDBKeyRange.bound("110", "120", false, true);

/**
 * 顺序参数：
 * IDBCursor.NEXT，顺序循环；
 * IDBCursor.NEXT_NO_DUPLICATE，顺序循环且键值不重复；
 * IDBCursor.PREV，倒序循环；
 * IDBCursor.PREV _NO_DUPLICATE，倒序循环且键值不重复。
 */

function byCursorGetForRangeAndSort(mydb){
    var transaction = mydb.transaction('Bookmark_Note_DB','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('Bookmark_Note_DB');
    var range = IDBKeyRange.bound("110", "113", false, true);   //范围
    var request=objStore.openCursor(range,             //范围（可以为null或省略不写）
                                    IDBCursor.NEXT);    //游标顺序循环(可以省略不写)
    request.onsuccess = function(e){
        var cursor1 = e.target.result;
        if(cursor1){
            alert(cursor1.value.name);
            cursor1.continue();
        }else {
            alert('遍历完成');
        }
    }
}

IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库;一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。

我们一起来了解一下IndexedDB；
当前，IndexedDB的规范尚未最终定稿，不同的浏览器厂商还是使用浏览器前缀实现IndexedDB API。基于Gecko内核的浏览器使用moz前缀，基于WebKit内核的浏览器使用webkit前缀。
如果还希望使用window.indexedDB来判断浏览器是否支持IndexedDB数据库，则可以做下面的处理：

window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;
  if(window.indexedDB){
    alert("您的浏览器支持IndexedDB数据库。");
  } else{
   alert("您的浏览器不支持IndexedDB数据库。");
  }

window.indexedDB对象只有一个open方法，用于打开指定的数据库，语法如下：
request对象 = window.indexedDB.open(数据库名, 数据库版本号)

//1、打开或创建数据库
request=window.indexedDB.open('testDB','2.0');//参数为：数据库名和版本号；数据库存在，则打开它；否则创建。

request对象用于处理用户对数据库的操作请求。可以通过它定义操作成功和失败的处理函数。
通过request.onsuccess可以指定操作成功的处理函数，方法如下：
（注：request.result是执行指定操作的结果，例如，执行打开数据库的操作后，通过request.result可以获得打开数据库的实例。通过数据库实例可以访问数据库。）

//2、指定操作成功的处理函数(可以获得对象存储空间信息)
request.onsuccess=function(event){
    alert('打开成功！');
    mydb=request.result;
    //var len = mydb.objectStoreNames.length;                 //对象存储空间名的个数
    //var  name=mydb.objectStoreNames[i];                     //对象存储空间名
    /*******方法调用********************/
    get(mydb);
};

通过request.onerror可以指定操作失败的处理函数，方法如下：

//3、指定操作失败的处理函数
request.onerror=function(event){
    alert("打开失败,错误号：" + event.target.errorCode);
};

通过request.onupgradeneeded可以执行改变数据库结构的操作函数（包括创建对象存储空间），方法如下：

//4、onupgradeneeded事件在下列情况下被触发：数据库第一次被打开时；打开数据库时指定的版本号高于当前被持久化的数据库版本号。(可通过修改版本号触发该事件)
request.onupgradeneeded = function(event) {
    mydb=request.result;//获得数据库实例对象
    if(!mydb.objectStoreNames.contains("students")) {                   //判断对象存储空间名称是否已经存在
        var objectStore = mydb.createObjectStore("students", {keyPath: "id"});//创建students对象存储空间;指定keyPath选项为id（即主键为id）
        //对象存储空间students的列email上创建一个唯一索引email,可以创建多个索引。
        objectStore.createIndex("email",                                //索引名
                                "email",                                //创建索引的列（即keyPath,索引属性字段名）
                                { unique: true });                      //索引选项(索引属性值是否唯一:true or false)
    }
}

以下是操作方法的编写：

插入数据：

function insert(mydb){
    var data = {
        "id": "110",
        "name": "李明",
        "age": "35",
        "email": "liming5@email.com"
    };
    //使用事务
    var transaction = mydb.transaction('students',                        //事务操作的对象存储空间名
                                    'readwrite');                         //事务模式:'readwrite'可读写模式;READ_ONLY只读模式;VERSION_CHANGE版本升级模式;
    //2.1、当事务中的所有操作请求都被处理完成时触发
    transaction.oncomplete = function(event) {};
    //2.2、当事务中出现错误时触发，默认的处理方式为回滚事务；
    transaction.onerror = function(event) {};
    //2.3、当事务被终止时触发
    transaction.onabort = function(event){};
    //2.4、从事务中获得相关的对象存储空间对象
    var objStore = transaction.objectStore('students');
    //向students存储空间加入一个student对象，获得request对象用于处理用户对数据库的操作请求(同样拥有onerror，onupgradeneeded，onsuccess事件)
    var request = objStore.add(data);
    request.onsuccess = function(e) {
        alert("成功插入数据，id=" + e.target.result);
    };
}

查询数据：

function get(mydb){
      var transaction = mydb.transaction('students','readwrite');
      transaction.oncomplete = function(event) {};
      transaction.onerror = function(event) {};
      transaction.onabort = function(event){};
      var objStore = transaction.objectStore('students');
      var request = objStore.get("110");                 //按照id查询
      request.onsuccess=function(e){
          alert(e.target.result.name +  e.target.result.age + e.target.result.email);
      }
  }

更新数据：

function update(mydb){
     var transaction = mydb.transaction('students','readwrite');
     transaction.oncomplete = function(event) {};
     transaction.onerror = function(event) {};
     transaction.onabort = function(event){};
     var objStore = transaction.objectStore('students');
     var request = objStore.get("110");
     request.onsuccess=function(e){
         var student=e.target.result;
         student.name='wwww1';
         objStore.put(student);
     }
 }

删除数据：

function remove(mydb){
    var transaction = mydb.transaction('students','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('students');
    var request = objStore.delete("110");
    request.onsuccess = function(e) {
        alert("成功删除数据");
    };
}

利用索引查询：

function byIndexGet(mydb){
    var transaction = mydb.transaction('students','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('students');
    var index = objStore.index('email');                //索引名
    var request=index.get('liming1@email.com');         //通过索引值获取数据
    request.onsuccess=function(e){
        var student=e.target.result;
        alert(student.name+"：索引查询");
    }
}

游标遍历所有：

function byCursorGet(mydb){
    var transaction = mydb.transaction('students','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('students');
    var request=objStore.openCursor();//打开游标
    request.onsuccess = function(e){
        var cursor = e.target.result;
        if(cursor){
            alert(cursor.value.name);
            cursor.continue();
        }else {
            alert('遍历完成');
        }
    }
}

通过范围和排序条件，游标遍历符合条件的数据：
说明：

/**
 * 范围：
 *（1）匹配等于指定键值的记录：var range = IDBKeyRange.only(指定键值)
 *（2）匹配小于指定键值的记录：var range = IDBKeyRange.lowerBound(指定键值, 是否不包括指定键值)
 *（3）匹配大于指定键值的记录：var range = IDBKeyRange.upperBound(指定键值, 是否不包括指定键值)
 *（4）匹配指定范围内的记录：var range = IDBKeyRange.bound(下限键值，上限键值，是否不包括下限键值，是否不包括上限键值
 */
  例如：
// 只取得当前索引的值为110的数据  
IDBKeyRange.only("110");  
// 只取得当前索引的值大于110，并且不包括110的数据  
IDBKeyRange.lowerBound("110", true);  
// 只取得当前索引的值小于110，并且包括110的数据  
IDBKeyRange.upperBound("110", false);  
// 取得当前索引的值介于110和120之间，并且包括110，但不包括120的数据  
IDBKeyRange.bound("110", "120", false, true);

/**
 * 顺序参数：
 * IDBCursor.NEXT，顺序循环；
 * IDBCursor.NEXT_NO_DUPLICATE，顺序循环且键值不重复；
 * IDBCursor.PREV，倒序循环；
 * IDBCursor.PREV _NO_DUPLICATE，倒序循环且键值不重复。
 */

function byCursorGetForRangeAndSort(mydb){
    var transaction = mydb.transaction('students','readwrite');
    transaction.oncomplete = function(event) {};
    transaction.onerror = function(event) {};
    transaction.onabort = function(event){};
    var objStore = transaction.objectStore('students');
    var range = IDBKeyRange.bound("110", "113", false, true);   //范围
    var request=objStore.openCursor(range,             //范围（可以为null或省略不写）
                                    IDBCursor.NEXT);    //游标顺序循环(可以省略不写)
    request.onsuccess = function(e){
        var cursor1 = e.target.result;
        if(cursor1){
            alert(cursor1.value.name);
            cursor1.continue();
        }else {
            alert('遍历完成');
        }
    }
}

可以在浏览器中按F12打开开发者模式查看：

例子源码下载地址：http://download.csdn.net/detail/rdj_miss/9507158

nedwons

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
front end :indexdb

thanks to the author :http://blog.csdn.net/Rdj_MISS/article/details/51285097IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库;一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储（
复制链接

扫一扫