IndexDB客户端数据库

作者: 摆渡侠 | 来源:发表于2019-07-17 09:49 被阅读0次

IndexDB为非关系型数据库,操作比较简单,下面出示了增删改查等简单操作,话不多说,直接上代码:

<body onload="init()">
<input type="button" value="新增几条数据" onclick=" Tinsert(); "/>
<input type="button" value="查找一条记录" onclick=" Tselect(); "/>
<input type="button" value="删除一条记录" onclick=" Tdelete(); "/>
<input type="button" value="更新一条记录" onclick=" Tupdate(); "/>
<input type="button" value="清除所有表数据" onclick=" Tclear(); "/>
<input type="button" value="查询所有表数据" onclick=" getall(); "/>
</body>
<script type="text/javascript">
    function init() {
      var dbParams = new Object();
      dbParams.db_name = "SISO";
      dbParams.db_version = "2";
      dbParams.db_store_name = "Test";
      dbObject.init(dbParams);
    }

    function Tinsert() {
      // 填入初始值
      dbObject.put({ title: "Quarry Memories", author: "Fred", isbn: 123456 }, 1);
      dbObject.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 }, 2);
      dbObject.put({ title: "Bedrock Nights", author: "Barney", isbn: 345678 }, 3);
    }

    function Tselect() {
      dbObject.select(3);
    }

    function Tupdate() {
      dbObject.put({ title: "Quarry wu", author: "lex", isbn: 123456 }, 1);
    }

    function Tdelete() {
      dbObject.delete(3);
    }

    function Tclear() {
      dbObject.clear();
    }
    
    function getall(){
      dbObject.getAlldata();
    }
  </script>
(function(){
      var dbObject = {};
      dbObject.init = function(params){
        this.db_name = params.db_name;
        this.db_version = params.db_version;
        this.db_store_name = params.db_store_name;
        if (!window.indexedDB)
        {
          window.alert("你的浏览器不支持IndexDB,请更换浏览器");
        }

        var request = indexedDB.open(this.db_name,this.db_version);
        //打开数据失败
        request.onerror = function(event)
        {
          alert("不能打开数据库,错误代码: " + event.target.errorCode);
        };
        request.onupgradeneeded = function(event)
        {
          this.db = event.target.result;
          this.db.createObjectStore(dbObject.db_store_name);
        };
        //打开数据库
        request.onsuccess = function(event)
        {
          //此处采用异步通知. 在使用curd的时候请通过事件触发
          dbObject.db = event.target.result;
        };
      };
      /**
       * 增加和编辑操作
       */
      dbObject.put = function(params,key) {
        //此处须显式声明事物
        var transaction = dbObject.db.transaction(dbObject.db_store_name, 'readwrite');
        var store = transaction.objectStore(dbObject.db_store_name);
        var request = store.put(params,key);
        request.onsuccess = function(){
          alert('添加成功');
        };
        request.onerror = function(event){
          console.log(event);
        }
      };
      /**
       * 删除数据
       */
      dbObject.delete = function(id) {
        // dbObject.db.transaction.objectStore is not a function
        request = dbObject.db.transaction(dbObject.db_store_name, "readwrite").objectStore(dbObject.db_store_name).delete(id);
        request.onsuccess = function(){
          alert('删除成功');
        }
      };

      /**
       * 查询操作
       */
      dbObject.select = function(key) {
        //第二个参数可以省略
        var transaction = dbObject.db.transaction(dbObject.db_store_name,"readwrite");
        var store = transaction.objectStore(dbObject.db_store_name);
        if(key)
          var request = store.get(key);
        else
          var request = store.getAll();

        request.onsuccess = function () {
          console.log(request.result);
        }
      };
      /**
       * 清除整个对象存储(表)
       */
      dbObject.clear = function() {
        var request = dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).clear();
        request.onsuccess = function(){
          alert('清除成功');
        }
      };
      /**
       * 查询所有数据
       */
      dbObject.getAlldata = function() {
        var request = dbObject.db.transaction(dbObject.db_store_name,"readwrite").objectStore(dbObject.db_store_name).getAll();
        request.onsuccess = function(){
          alert('查询成功');
          console.log(request.result)
        }
      };
      window.dbObject = dbObject;
    })();

部分内容摘抄自网络,若有侵权,联系删除。

相关文章

  • IndexDB客户端数据库

    IndexDB为非关系型数据库,操作比较简单,下面出示了增删改查等简单操作,话不多说,直接上代码: 部分内容摘抄自...

  • 前端基础整理 | 本地存储 Cookie、SessionStor

    本地存储除了标题所述的几种,还包括IndexDB,相当于在客户端建立一个数据库,和上面那些相差有点大,所以先不提。...

  • 前端indexDB数据库的使用

    一、indexDB中的对象 数据库:IDBDatabase 对象 对象仓库:IDBObjectStore 对象 索...

  • 浏览器 IndexDB 的使用

    浏览器也支持数据库,目前有IndexDB 和 WebSql(仅Chrome支持)可以选择,相比localStro...

  • 2021-11-09

    IndexDB

  • IndexedDB的二次封装

    前言 浏览器数据库存储indexDB(非关系型数据库),考虑到同步的场景,针对其固有api进行二次封装以满足需求。...

  • 基于浏览器端的数据存储方案

    客户端存储目前有两个方案比较 localStorage大家都很常用,这里就不说了,下面和大家说一下indexDB的...

  • 【16】本地数据库indexdb

    HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序。IndexedDB支持本...

  • indexDB

    1.特点 键值对存储:每条记录都有对应的主键,主键是独一无二的,不能重复 异步:在操作indexDB的时候不会锁死...

  • indexDB

    参考:IndexedDB 教程

网友评论

    本文标题:IndexDB客户端数据库

    本文链接:https://www.haomeiwen.com/subject/dsbflctx.html