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>

<script type="text/javascript">
 //ie浏览器需要在测试环境中才能运动
  const customerData = [
      { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
      { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" },
      { ssn: "6-66-66", name: "duxinli", age: 38, email: "duxinli@home.org" }
    ];
    const dbName = "test_duxinli_DB";

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实例的更多相关文章

  1. html5 浏览器端数据库

    为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可 ...

  2. HTML 5浏览器端数据库

    HTML 5浏览器端数据库为什么要使用浏览器端数据库:随着浏览器处理能力的增强,越来越多的双喜鸟网站开始考虑在客户端存储大量的数据,这可以减少用户从服务器获取数据的等待时间. 1.本地存储-本地存储可 ...

  3. [转] js在浏览器端对二进制流进行AES加密和解密

    开始解密 简单了解一下所用的的AES加密算法,我们用的是AES的CFB加密方式,服务端会提供给我一个key和iv的二进制字节串.密文也是二进制字节串. 我用的加密/解密插件: crypto-js 一般 ...

  4. 遵循amd规范的require.js(适合浏览器端)

    1. 下载require.js 2. 引用 html <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 浏览器端JS导出EXCEL

    浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...

  6. 实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

    Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司 ...

  7. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  8. JS神经网络deeplearn.js:浏览器端机器智能框架

    JS神经网络deeplearn.js:浏览器端机器智能框架 通过 deeplearn.js,可以实现在浏览器中训练神经网络模型,也可在推理阶段运行预训练模型. deeplearn.js 以 TypeS ...

  9. 如何让Node.js运行在浏览器端

    Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1. ...

随机推荐

  1. sql查询重复记录、删除重复记录方法大全

    查找所有重复标题的记录:SELECT *FROM t_info aWHERE ((SELECT COUNT(*)FROM t_infoWHERE Title = a.Title) > 1)ORD ...

  2. 如何编译MongoDB?

    本文将在Linux环境下编译Mongodb. 您可以选择已经编译好的版本直接使用,也可以尝试自己编译.https://www.mongodb.org/downloads#production   官方 ...

  3. SQLSERVER中如何快速比较两张表的不一样

    SQLSERVER中如何快速比较两张表的不一样 不知不觉要写2014年的最后一篇博文了~ 一般来说,如何检测两张表的内容是否一致,体现在复制的时候发布端和订阅端的两端的数据上面 我这里罗列了一些如何从 ...

  4. 一个事务复制的bug--更新丢失

    有两种情况会造成更新丢失,第一种是不正确的设置,例如外键或触发器的“Not For Replication” (NFR)属性没有开启.详情请参考http://blogs.msdn.com/b/apgc ...

  5. Visual Studio Xamarin编译Android项目出错的解决办法

    安装完Xamarin后,编译Android项目时,你会发现好长时间进度都不动,当你取消编译后,会发现其实是出错了,就是因在Android项目在第一次编译时要去google网站上下一个andorid s ...

  6. Web Essentials之HTML和CSS操作技巧

    返回Web Essentials功能目录 一些Javascript功能也可以用于TypeScript. 本篇目录 功能 ZenCoding LESS 功能 最小化HTML文件 选中要最小化的.html ...

  7. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  8. dojo/dom-construct.toDom方法学习笔记

    toDom方法用来将html标签字符串转化成DOM节点.1.7之后toDom方法被分配到了dom-construct模块. require(["dojo/dom-construct" ...

  9. Web前端技术研究:Css hack技术---令人沮丧的技术

    我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...

  10. .net 时间戳和日期互转

    1.时间戳转日期 public static DateTime IntToDateTime(int timestamp) {     ,,)).AddSeconds(timestamp); } 调用: ...