返回顶部
首页 > 资讯 > 服务器 >如何将数据库从服务器移到浏览器
  • 959
分享到

如何将数据库从服务器移到浏览器

2024-04-02 19:04:59 959人浏览 泡泡鱼
摘要

这篇文章给大家分享的是有关如何将数据库从服务器移到浏览器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、链接数据库  indexedDB没有创建数据库的概念,你可以直接链接数据

这篇文章给大家分享的是有关如何将数据库服务器移到浏览器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

一、链接数据库

  indexedDB没有创建数据库的概念,你可以直接链接数据库,如果你链接的数据库并不存在,那么会自动的创建一个数据库。看下面的这个例子。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><button type="" id='conbtn'>链接数据库</button><script>// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.WEBkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功!');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败!');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                success(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功,旧的版本号为:'+oldVersion+",新的版本号为:"+newVersion);
            }
   }
   window.onload=function(){
           let btn  = document.getElementById('conbtn');
           btn.onclick = function(){
               connectDB('haha',1,function(){
                   console.log('链接成功,或者更新成功回调函数');
               },function(){
                   console.log('链接失败回调函数!')
               });
           }
   }</script></body></html>

  我点了两次链接数据库,结果是这样的。

如何将数据库从服务器移到浏览器

  在Application的indexedDB中我们发现多了一个东西。

  如何将数据库从服务器移到浏览器

  可以看到haha数据库已经成功建立了。

  indexedDB的open方法用来链接或者更新数据库,第一次创建也认为是一次更新。第一个参数是数据库的名字,第二个参数为版本号。第一次创建或者版本号发生改变时出发更新事件upgradeneeded,链接成功后出发success事件,链接出错时触发error事件。

二、建表和索引

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><button type="" id='conbtn'>链接数据库</button><script>// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,update,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功!');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败!');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                update(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功,旧的版本号为:'+oldVersion+",新的版本号为:"+newVersion);
            }
   }       function createTable(idb,storeName,key,idxs){if(!idb){
            console.log(idb);return ;
        }if(!key || !idxs){
            console.log('参数错误');return ;
        }if(!storeName){
            console.log('storeName必须');return ;
        }try{var store = idb.createObjectStore(storeName,key);
            console.log('数据库存储对象(table)创建成功');for(var i = 0;i<idxs.length;i++){var idx = idxs[i];
                store.createIndex(idx.indexName,idx.keyPath,idx.optionalParameters);
                    console.log('索引'+idx.indexName+'创建成功');
            }
        }catch(e){
            console.log('建表出现错误');
            console.log(JSON.stringify(e))
        }
    }
   window.onload=function(){
           let btn  = document.getElementById('conbtn');
           btn.onclick = function(){
               connectDB('haha',1,                 function(idb){
                   console.log('链接成功,或者更新成功回调函数');
               },function(idb){                   createTable(idb,'test',{keyPath:'id',autoIncrement:true},[
                       {
                       indexName:'testIndex',
                     keyPath:'name',
                     optionalParameters:{
                         unique:true,
                         multiEntry:false }}]);                   
               },function(){
                   console.log('链接失败回调函数!')
               });
           }
   }</script></body></html>

  我点了一下按钮结果时这样的。

  如何将数据库从服务器移到浏览器

  如何将数据库从服务器移到浏览器

  这里用到的两个核心方法时createObjectStore,和createIndex,这两个方法必须在数据库发生更新的事件中执行。

  createObjectStore方法可以理解成是创建表,接受第一个参数为一个字符串,表示表名,第二个参数是一个对象,指定主键相关的东西,{keyPath:'主键是哪个字段',autoIncrement:是否自增}。

  createIndex方法是创建索引的,接受三个参数,第一个是一个字符串,表示索引的名字,第二个参数表示字段名(谁的索引),第三个参数是个对象,具体自己查去。索引的作用是在查询操作时可以用到,不详讲,自行Google吧。

三、添加数据

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><button type="" id='conbtn'>链接数据库</button><button type="" id='add'>添加数据</button><script>// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,update,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功!');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败!');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                update(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功,旧的版本号为:'+oldVersion+",新的版本号为:"+newVersion);
            }
   }       function createTable(idb,storeName,key,idxs){if(!idb){
            console.log(idb);return ;
        }if(!key || !idxs){
            console.log('参数错误');return ;
        }if(!storeName){
            console.log('storeName必须');return ;
        }try{var store = idb.createObjectStore(storeName,key);
            console.log('数据库存储对象(table)创建成功');for(var i = 0;i<idxs.length;i++){var idx = idxs[i];
                store.createIndex(idx.indexName,idx.keyPath,idx.optionalParameters);
                    console.log('索引'+idx.indexName+'创建成功');
            }
        }catch(e){
            console.log('建表出现错误');
            console.log(jsON.stringify(e))
        }
    }function add(storeName,values){
    connectDB('haha',1,function(idb){var ts = idb.transaction(storeName,"readwrite");var store = ts.objectStore(storeName);        for(var i = 0;i<values.length;i++){
            (function(i){var value = values[i];var req = store.put(value);
                req.onsuccess = function(){
                    console.log("添加第"+i+"个数据成功");
                }
                req.onerror = function(e){
                    console.log("添加第"+i+"个数据失败");
                    console.log(JSON.stringify(e));
                }                            
            })(i)

        }
        ts.oncomplete = function(){
            console.log('添加数据事务结束!');
        }
    },function(){},function(){});

                
    }
   window.onload=function(){
           let btn  = document.getElementById('conbtn');
           btn.onclick = function(){
               connectDB('haha',1,                 function(idb){
                   console.log('链接成功,或者更新成功回调函数');
               },function(idb){
                   createTable(idb,'test',{keyPath:'id',autoIncrement:true},[
                       {
                       indexName:'testIndex',
                     keyPath:'name',
                     optionalParameters:{
                         unique:true,
                         multiEntry:false }}]);                   
               },function(){
                   console.log('链接失败回调函数!')
               });
           }
           let add1 = document.getElementById('add');
           add1.onclick = function(){
               add('test',[{name:"fjidfji",a:'uuuu'}])
           }
   }</script></body></html>

如何将数据库从服务器移到浏览器

如何将数据库从服务器移到浏览器

  比较神奇的是你在建表的时候不需要指定你的字段,再添加数据时可以随便加。添加数据用到的是表对象的put方法,之前需要一个事务,从事务调个方法拿到存储对象(可以理解为表),具体看看例子就明白了。

四、查询数据

Document链接数据库添加数据查询

如何将数据库从服务器移到浏览器

  查询操作主要用到了游标,这个说起来还比较多,没时间说了,自行google。还有很多的操作这里不讲了。给一个我封装的不是很好的简易库,仅供参考。

   一个简易库。

(function(window){'use strict';
    window.dbUtil={
    indexedDB :(window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB),

    IDBTransaction :(window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction),

    IDBKeyRange :(window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange),

    IDBCursor : (window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor),            
    idb:null,
    dbName:"",
    dbVersion:"",initDB:function (dbName,dbVersion,storeObjs){this.dbName = dbName;this.dbVersion = dbVersion;var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);var self = this;
        dbConnect.onsuccess = function(e){
            self.idb = e.target.result;
            self.log('数据库链接成功!');                
        }
        dbConnect.onerror = function(e){
            console.log(e)
            self.log('数据库链接失败!');
        }
        dbConnect.onupgradeneeded = function(e){
            self.idb = e.target.result;var ts = e.target.transaction;var oldVersion = e.oldVersion;var newVersion = e.newVersion;
            self.log('数据库更新成功,旧的版本号为:'+oldVersion+",新的版本号为:"+newVersion);if(storeObjs){for(var k = 0,len=storeObjs.length;k<len;k++){var storeObj = storeObjs[k];var storeName = storeObj.storeName;var key = storeObj.key;var idxs = storeObj.idxs;

                    self.createTable(storeName,key,idxs)
                }
            }
        }
    },createTable:function(storeName,key,idxs){var self = this;var idb = self.idb;if(!idb){
            self.log('数据库没有链接');return ;
        }if(!key || !idxs){
            self.log('参数错误');return ;
        }if(!storeName){
            self.log('storeName必须');return ;
        }try{var store = idb.createObjectStore(storeName,key);
            self.log('数据库存储对象(table)创建成功');for(var i = 0;i<idxs.length;i++){var idx = idxs[i];
                store.createIndex(idx.indexName,idx.keyPath,idx.optionalParameters);
            self.log('索引'+idx.indexName+'创建成功');
            }
        }catch(e){
            self.log('建表出现错误');
            console.log(JSON.stringify(e))
        }
    },add:function(storeName,values){var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);var self = this;
        dbConnect.onsuccess = function(e){var idb = e.target.result;var ts = idb.transaction(storeName,"readwrite");var store = ts.objectStore(storeName);for(var i = 0;i<values.length;i++){
                (function(i){var value = values[i];var req = store.put(value);
                    req.onsuccess = function(){
                        self.log("添加第"+i+"个数据成功");
                    }
                    req.onerror = function(e){
                        self.log("添加第"+i+"个数据失败");
                        self.log(JSON.stringify(e));
                    }                            
                })(i)

            }
            ts.oncomplete = function(){
                self.log('添加数据事务结束!');
            }
                    
        }

    },select:function(storeName,count,callback,indexName){var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);var self = this;var total = 0;var data = [];
        dbConnect.onsuccess = function(e){
            self.log("数据库链接成功!");var idb = e.target.result;var ts = idb.transaction(storeName,"readonly");var store = ts.objectStore(storeName);var req = store.count();var req2 = null;
            req.onsuccess = function(){
                total = this.result;var realCount = (count<=total)?count:total;if(typeof indexName == 'undefined'){var range = IDBKeyRange.bound(0,"9999999999999999999999");
                    req2 = store.openCursor(range,'prev');var cc = 0;
                    req2.onsuccess = function(){var cursor = this.result;if(total == 0){
                            callback([]);return;
                        }if(cursor){                        
                            cc++;
                            data.push(cursor.value);if(cc==realCount){
                                callback(data);return;
                            }
                            cursor.continue();
                        }
                    }
                    req2.onerror = function(){
                        self.log("检索出错")
                    }
                }else{//待写                }                        
            }

        }
    },delete:function(storeName,key,callback){var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);
        let self = this;
        dbConnect.onsuccess = function(e){var idb = e.target.result;var ts = idb.transaction(storeName,'readwrite');var store = ts.objectStore(storeName);
            store.delete(key);
            self.log('删除成功!');if(callback){
                callback();
            }
        }
    },isExist:function(storeName,key,existCall,notExistCall){var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);
        dbConnect.onsuccess = function(e){var idb = e.target.result;var ts = idb.transaction(storeName,'readonly');var store = ts.objectStore(storeName);var req = store.get(key);
            req.onsuccess = function(){if(this.result == undefined){
                    notExistCall();
                }else{
                    existCall(this.result);
                }
            }
            req.onerror = function(){
                notExistCall();
            }
        }
    },clear:function clearObjectStore(storeName){var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);
            dbConnect.onsuccess = function(e){var idb = e.target.result;var ts = idb.transaction(storeName,'readwrite');var store = ts.objectStore(storeName);
                store.clear();
            }        
    },dropDatabase:function(dbName){this.indexedDB.deleteDatabase(dbName);this.log('成功删除数据库:'+dbName);
    },log:function(msg){
        console.log((new Date()).toTimeString()+":"+msg)
    }

    }

})(window);

五、使用indexedDB的优缺点

  1、优点:可以将一些数据放到浏览器端,不用和服务器交互就可以实现一些功能,减轻服务器负担,加快响应速度。

  2、缺点:

  (1)不可靠:用户可能删处indexedDB,而且更换浏览器或者设备后这些数据就没了。

  2)不便于数据采集:有很多时候将数据存到服务器是为了获得一些数据,如果放到浏览器端,这些数据比较难获取。

 (3)无法共享:不同用户没办法共享数据,甚至时一个设备的不同浏览器也没法共享。

  所以,是否适用indexedDB要进行一下利弊权衡,不是有了indexedDB就啥也不管,一骨脑将数据放进去。

感谢各位的阅读!关于“如何将数据库从服务器移到浏览器”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 如何将数据库从服务器移到浏览器

本文链接: https://lsjlt.com/news/81588.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何将数据库从服务器移到浏览器
    这篇文章给大家分享的是有关如何将数据库从服务器移到浏览器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、链接数据库  indexedDB没有创建数据库的概念,你可以直接链接数据...
    99+
    2024-04-02
  • 如何将数据库从MySQL移植到MemSQL
    本篇内容介绍了“如何将数据库从MySQL移植到MemSQL”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 如何将阿里云服务器数据库迁移到新服务
    在云服务的世界里,数据库迁移是一个常见的任务。阿里云服务器数据库的迁移,也称为云迁移,是指将阿里云服务器上的数据库迁移到其他阿里云服务器或云数据库服务的过程。本文将详细介绍如何将阿里云服务器数据库迁移到新服务。 步骤一:备份数据库在开始迁移...
    99+
    2023-12-12
    阿里 如何将 到新
  • 如何将数据从SQL Server 迁移到PostgreSQL?将数据从SQL Server 迁移到PostgreSQL方法分析!
    在不同类型的数据库之间迁移数据并非易事。在本文中,我们将比较几种从 SQL Server 转换到 PostgreSQL 的方法。Microsoft SQL Server 是一个很棒的数据库引擎,但在某些情...
    99+
    2020-08-12
    如何将数据从SQL Server 迁移到PostgreSQL?将数据从SQL Server 迁移到PostgreSQL方法分析!
  • 如何从浏览器监视Linux服务器资源
    这篇文章主要讲解了“如何从浏览器监视Linux服务器资源”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何从浏览器监视Linux服务器资源”吧!过去,我们介绍了许多用于监视Linux性能的基...
    99+
    2023-06-15
  • 怎么从AIX将数据库迁移到Linux Oracle中
    本篇内容主要讲解“怎么从AIX将数据库迁移到Linux Oracle中”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么从AIX将数据库迁移到Linux Ora...
    99+
    2024-04-02
  • 如何把本地mysql迁移到服务器数据库
    我们可以使用linux的scp命令(scp无法在windows使用),加上mysql自带的mysqldump,能很快的完成数据库的迁移 将本地的数据库(music_db)导出为sql文件(music_db.sql) ...
    99+
    2022-05-21
    mysql 迁移 服务器 数据库
  • 如何将表或数据库从一台MySQL服务器复制到另一台MySQL服务器?
    如果我们要将表或数据库从一台 MySQL 服务器复制到另一台 MySQL 服务器,请使用带有数据库名称和表名称的 mysqldump 。 在源主机上运行以下命令。这会将完整的数据库转储到dump.txt 文件中。$ mysqldump -u...
    99+
    2023-10-22
  • 如何将数据从 Oracle 迁移到 MySQL:分步指南
    数据迁移在各种业务场景中发挥着至关重要的作用。当您的公司将其服务从本地迁移到云端时,数据迁移就会介入,将数据从旧位置传输到新位置。另一种常见的做法可能是更换或升级服务器或存储设备。在这种情况下,数据迁移可确保数据的顺利高效传输,最大限度地减...
    99+
    2023-08-31
    oracle mysql 数据库
  • 如何将数据从阿里云服务器传输到电脑
    在云计算时代,越来越多的企业和个人选择将数据存储在云端服务器上,以实现数据的高效管理和共享。然而,有时候我们需要将数据从阿里云服务器传输到个人电脑,以便进行进一步处理或备份。本文将介绍几种常见的方法,帮助您轻松完成数据传输任务。 1. 使用...
    99+
    2024-01-14
    阿里 如何将 服务器
  • 如何将服务器迁移到阿里云服务器
    这篇文章将详细介绍如何将服务器迁移到阿里云服务器,包括准备阶段、迁移阶段和优化阶段。无论您是初学者还是有经验的管理员,这篇文章都将为您提供实用的步骤和建议。 准备工作:了解阿里云服务器:在开始迁移之前,您需要了解阿里云服务器的特点、功能和优...
    99+
    2023-10-31
    服务器 阿里 如何将
  • 如何将数据库放云服务器
    要将数据库放在云服务器上,可以按照以下步骤进行操作:1. 选择一个云服务提供商,注册一个账户并登录到云服务控制台。2. 创建一个云服...
    99+
    2023-08-29
    数据库 云服务器
  • 如何从mysql中将数据导入到oracle数据库中
    这篇文章主要讲解了“如何从mysql中将数据导入到oracle数据库中”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何从mysql中将数据导入到oracl...
    99+
    2024-04-02
  • 如何将数据上传到云服务器
    将数据上传到云服务器可以通过以下步骤实现:1. 选择云服务提供商:选择一个可靠的云服务提供商。2. 创建云服务器实例:在选择的云服务...
    99+
    2023-09-27
    云服务器
  • 阿里云服务器到期数据库:如何备份和迁移数据?
    简介 阿里云服务器是一种强大的云计算服务,但当服务器到期时,您需要考虑如何备份和迁移您的数据库。本文将介绍一些常见的备份和迁移策略,以确保您的数据安全。数据库备份在服务器到期之前,备份数据库是至关重要的。以下是一些备份数据库的方法:全量备份...
    99+
    2024-01-30
    阿里 备份 服务器
  • 如何将数据从Web服务处理到MongoDB中
    本篇内容主要讲解“如何将数据从Web服务处理到MongoDB中”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何将数据从Web服务处理到MongoDB中”吧!概...
    99+
    2024-04-02
  • 阿里云如何从做服务器转移数据
    简介 阿里云作为国内领先的云计算服务提供商,为用户提供了丰富的云产品和服务。在使用阿里云的过程中,有时候我们需要将服务器上的数据转移到其他地方。本文将介绍阿里云如何实现从服务器转移数据的方法。1. 使用阿里云的数据传输服务阿里云提供了一项名...
    99+
    2023-12-29
    阿里 服务器 数据
  • Win10系统如何将edge浏览器图标固定到任务栏?
    Win10自带的Edge浏览器只能从系统里找,或者由小娜唤出,并没有在桌面上显示。为了更加方便地操作,很多Windows10系统用户都会将自己常用的应用程序固定在任务栏上。那么,我们该如何把win10自带的Edge浏览器...
    99+
    2023-05-20
    Win10 edge 图标 任务栏
  • Windows8系统如何将第三方浏览器设置默认浏览器
      习惯不一样,操作方式也会不一样,很多用户不习惯Windows8系统自动为用户设置的默认IE浏览器,想指定自己常用的其他第三方浏览器为默认开启,这要怎么操作呢?   Windows8系统如何设置默认浏览器...
    99+
    2022-06-04
    第三方 如何将 浏览器
  • 如何迁移数据到阿里云服务器
    随着云计算技术的快速发展,越来越多的企业选择将数据迁移到云服务器上,以提高数据存储和处理的效率。而阿里云作为国内领先的云计算服务提供商,其强大的服务器资源和稳定的服务质量备受好评。本文将介绍如何将数据迁移到阿里云服务器上,并提供一些实用的...
    99+
    2023-12-29
    阿里 服务器 数据
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作