js IndexedDB：浏览器端数据库的demo实例

IndexedDB具有以下特点。

（1）键值对储存。 IndexedDB内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与localStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同域限制 IndexedDB也受到同域限制，每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。

（5）储存空间大 IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。

（6）支持二进制储存。 IndexedDB不仅可以储存字符串，还可以储存二进制数据。

目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持这个API，但是Safari完全不支持。

<!DOCTYPE html>
<html>

<head>
    <title>indexedDB：浏览器端数据库 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="http://www.xueersi.com/lib/jQuery/1.11.1/jquery.min.js?1458897912"></script>
    <style type="text/css">
      ul,li{
          list-style: none;
          float: left;
          width: 100%;
      }

</style>
</head>
<body>
<button id="add">添加数据</button>
<button id="get">获取数据</button>
<button id="delete">删除一条数据</button>
<button id="updata">更新数据</button>
<button id="clear">清空object store</button>
<ul id="display"></ul>

</body>
</html>

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
      // 错误处理程序在这里。
   };
   var db;
   request.onupgradeneeded = function(event) {
      db = event.target.result;

// 创建一个对象存储空间来持有有关我们客户的信息。
// 我们将使用 "ssn" 作为我们的 key path 因为它保证是唯一的。
var objectStore = db.createObjectStore("customers", { keyPath: 'ssn', autoIncrement: true });

// 创建一个索引来通过 name 搜索客户。
// 可能会有重复的，因此我们不能使用 unique 索引。
objectStore.createIndex("name", "name", { unique: false });

// 创建一个索引来通过 email 搜索客户。
// 我们希望确保不会有两个客户使用相同的 email 地址，因此我们使用一个 unique 索引。
objectStore.createIndex("email", "email", { unique: false });

// 在新创建的对象存储空间中保存值
      for (var i in customerData) {
         objectStore.add(customerData[i]);
      }
   };
   request.onsuccess = function(e) {
        console.log("Success!");
        db = e.target.result;
   }

   request.onerror = function(e) {
        console.log("Error");
        console.dir(e);
   }

     //获取数据
   function displayPubList() {

$('#display').empty();
            var tx = db.transaction('customers', 'readonly');
            var store = tx.objectStore('customers');
            var req;

req = store.count();
            console.log(req)
            req.onsuccess = function(evt) {
              console.log(evt.target.result)
            };
            req.onerror = function(evt) {
              console.error("add error", this.error);
            };
            req.onerror = function(evt) {
              console.error("add error", this.error);
              displayActionFailure(this.error);
            };

req = store.openCursor();
            req.onsuccess = function(evt) {
              var cursor = evt.target.result;
              if(cursor){
                 var result = evt.target.result.value;

var val = result.ssn + "~~~~~~~~"+ result.name + "~~~~~~~~"+ result.age + "~~~~~~~~"+ result.email;

$('#display').append('<li>'+ val+'</li>')

                  cursor.continue();
              }

}

}

    function addPublication() {
        if (!db) {
          return;
        }
        //点击快了i相同就会报错，ssn键值不能相同
        var i = Date.parse(new Date()).toString().substr(0,10);
        var tx = db.transaction('customers', 'readwrite');
        var store = tx.objectStore('customers');
        var req = store.add({ ssn: "8-88-88-"+i, name: "xiaohong"+i, age: 40, email: "xiaohong-"+i+"-@home.org" });
        req.onsuccess = function (evt) {
          displayPubList();
        };
        req.onerror = function() {
          console.error("add error", this.error);
        };
   }

$(function(){
    $('#get').click(function(){
       displayPubList();
    })
    $('#add').click(function(){
       addPublication();
    })

$('#delete').click(function(evt) {
          var k = '444-44-4444';
          var tx = db.transaction('customers', 'readwrite');
          var store = tx.objectStore('customers');

var req = store.get(k);
req.onsuccess = function(evt) {
var record = evt.target.result;

if (typeof record != 'undefined') {
               req = store.delete(k);
            }
            displayPubList();
          };
          req.onerror = function (evt) {
            console.error("delete:", evt.target.errorCode);
          };

});
   //更新数据
    $('#updata').click(function(){
        var tx = db.transaction('customers', 'readwrite');
        var store = tx.objectStore('customers');
        var req = store.get('555-55-5555');
        req.onsuccess=function(e){
            var student=e.target.result;
            if(typeof record != 'undefined'){
               student.age=26;
                student.name="hanjinshan";
                student.email="hanjinshan@home.org";
                store.put(student);
            }

            displayPubList();
        };
    });

//删除数据仓库
    $('#clear').click(function(){
        var tx = db.transaction('customers', 'readwrite');
        var store = tx.objectStore('customers');
        store.clear();
        displayPubList();
    })

    /*调用数据库实例的deleteObjectStore方法可以删除一个object store，这个就得在onupgradeneeded里面调用了
   if(db.objectStoreNames.contains('students')){
        db.deleteObjectStore('customers');
   }*/

})
</script>

秒客网

js IndexedDB：浏览器端数据库的demo实例

相关文章