精华内容
下载资源
问答
  • indexedDB

    2020-12-28 15:35:10
    文章目录IndexedDB 概述IndexedDB 的特点操作数据库1.创建数据库2.新增数据3.读取数据4.更新数据5.删除数据6.搜索数据7.删除数据库 IndexedDB 概述 IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和...

    IndexedDB 概述

    IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

    IndexedDB 的特点

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

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

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

    (4)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

    (5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。

    (6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。

    操作数据库

    1.创建数据库

    //打开IndexedDB数据库 window.indexedDB.open(name,version) 
    // 这个方法接受两个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在,就会新建数据库。第二个参数是整数,表示数据库的版本。
    // 如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1
    var data=[{
    	id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' 
    	},{
    		id:2,name:'吴亦凡',age:30,email:'wuyifang@example.com'
    	},{
    		id:3,name:'杨紫',age:28,email:'yangzi@example.com'
    }]
    var data1=[{
    	id: 1, name: '里斯', age: 22, email: 'lisi@example.com' 
    },{
    	id:2,name:'虎哥',age:15,email:'huge@example.com'
    },{
    	id:3,name:'胖妞',age:12,email:'pangniu@example.com'
    }]
    var db
    var openIndexDB = window.indexedDB.open(name)  
    console.log(openIndexDB)
    

    在这里插入图片描述
    在这里插入图片描述

    (1)error 事件

    openIndexDB.error=function(event){
    console.log(‘数据库打开失败’)
    }
    

    (2)success 事件

    openIndexDB.success=function(event){
    db=openIndexDB.result
    console.log(db)
    console.log(‘数据库打开成功’)
    }
    

    在这里插入图片描述
    在这里插入图片描述

    (3)upgradeneeded 事件

    openIndexDB.onupgradeneeded=function(event){
    	let bda=event.target.result
    	if(!bda.objectStoreNames.contains('person')){
    		objectStore = bda.createObjectStore('person', { keyPath: 'id' });//主键是id
    		//bda.createObjectStore('person', {autoIncrement:true})让数据库自动生成主键
    		// objectStore.createIndex()方法用于新建当前数据库的一个索引
    		objectStore.createIndex('name', 'name', { unique: false });
    		objectStore.createIndex('email', 'email', { unique: true });
    		//    unique:如果设为true,将不允许重复的值。multiEntry:如果设为true,对于有多个值的主键数组,每个值将在索引里面新建一个条目,否则主键数组对应一个条目。
    	}
    	console.log('成功创建对象存储空间---')
    }
    

    在这里插入图片描述

    2.新增数据

    <button onclick="add()">新增数据</button>
    function add(){
    // IDBDatabase 对象的transaction()返回一个事务对象,该对象的objectStore()方法返回 IDBObjectStore 对象
    //objectStore.add()用于向对象仓库添加数据,返回一个 IDBRequest 对象。该方法只用于添加数据,如果主键相同会报错,因此更新数据必须使用put()方法。
    // var request=db.transaction(['person'],'readwrite').objectStore('person').add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' }); 单个新增
    	var store=db.transaction(['person'],'readwrite').objectStore('person')
    	for(var value of data){//数组遍历出来新增
    		let request=store.add(value)
    		request.onsuccess = function (event) {
    		    console.log('数据写入成功');
    		};
    		request.onerror = function (event) {
    		    console.log('数据写入失败');
    		}
    	}
    	
    }		
    

    3.读取数据

    <button onclick="read()">读取数据</button>
    function read(){
    				var transaction = db.transaction(['person']);
    				var objectStore = transaction.objectStore('person');
    				//获取其中一个
    				//objectStore.get(id)  id 是数据data里的id
    				// objectStore.get()用于获取主键对应的数据记录
    				var request = objectStore.get(3);
    				request.onerror = function(event) {
    				 	console.log('事务失败');
    				};
    				
    			   request.onsuccess = function( event) {
    				   if (request.result) {
    					    console.log('Name: ' + request.result.name);
    						console.log('Age: ' + request.result.age);
    					    console.log('Email: ' + request.result.email);
    				  } else {
    						console.log('未获得数据记录');
    				 }
    			  };
    				// 获取全部数据
    				// objectStore.openCursor()用于获取一个指针对象指针对象可以用来遍历数据。该对象也是异步的,有自己的success和error事件,可以对它们指定监听函数。
    				 objectStore.openCursor().onsuccess = function (event) {
    				     var cursor = event.target.result;
    				
    				     if (cursor) {
    				       console.log('Id: ' + cursor.key);
    				       console.log('Name: ' + cursor.value.name);
    				       console.log('Age: ' + cursor.value.age);
    				       console.log('Email: ' + cursor.value.email);
    				       cursor.continue();
    				    } else {
    				      console.log('没有更多数据了!');
    				    }
    				  };
    			}		
    

    在这里插入图片描述

    4.更新数据

    <button onclick="update()">更新数据</button>
    function update(){
        //修改单个
       // objectStore.put()方法用于更新某个主键对应的数据记录,如果对应的键值不存在,则插入一条新的记录
    	var request = db.transaction(['person'], 'readwrite')
    	    .objectStore('person')
    	    .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
    	
    	  request.onsuccess = function (event) {
    	    console.log('数据更新成功');
    	  };
    	
    	  request.onerror = function (event) {
    	    console.log('数据更新失败');
    	  }
    
    	//批量修改
    	var store=db.transaction(['person'], 'readwrite').objectStore('person')
    	for(const val of data1){
    		var request=store.put(val)
    		request.onsuccess = function (event) {
    		  console.log('数据更新成功');
    		};
    						
    		request.onerror = function (event) {
    		  console.log('数据更新失败');
    		}
    	}
    }		
    

    在这里插入图片描述

    5.删除数据

    <button onclick="remove()">删除数据</button>
    function remove(){
      //单个删除,传入id
      objectStore.delete()方法用于删除指定主键的记录
    	var request = db.transaction(['person'], 'readwrite')
    	    .objectStore('person')
    	    .delete(1);
    	
    	  request.onsuccess = function (event) {
    	    console.log('数据删除成功');
    	  };
    	 //删除所有的
    	  var store = db.transaction(['person'], 'readwrite').objectStore('person');
    				  for(const va of data1){
    					  var request=store.delete(va.id)
    					  request.onsuccess = function (event) {
    					    console.log('数据删除成功');
    					  };
    				  }
    }
    

    在这里插入图片描述

    6.搜索数据

    <button onclick="search()">搜索</button>
    function search(){
    	let store = db.transaction(['person'], "readonly").objectStore('person');
    	// objectStore.index()方法返回指定名称的索引对象 IDBIndex
    	var index = store.index('name');
    	var request = index.get('吴亦凡');
    	request.onsuccess = function (e) {
    	  var result = e.target.result;
    	  if (result) {
    		  console.log(result)
    	    console.log('搜索成功');
    	  } else {
    	    console.log('搜索失败');
    	  }
    	}
    }
    

    在这里插入图片描述

    7.删除数据库

    indexedDB.deleteDatabase()方法用于删除一个数据库,参数为数据库的名字

    var DBDeleteRequest = window.indexedDB.deleteDatabase('IDBFactory');
    console.log(DBDeleteRequest)
    DBDeleteRequest.onerror = function (event) {
      console.log('Error');
    };
    
    DBDeleteRequest.onsuccess = function (event) {
    	console.log(event.target.result)
      console.log('success');
    };
    

    在这里插入图片描述

    展开全文
  • Indexeddb

    2020-12-29 06:35:33
    <div><p>Can ForerunnerDB use indexeddb ?</p><p>该提问来源于开源项目:Irrelon/ForerunnerDB</p></div>
  • IndexedDB

    2020-01-06 16:32:18
    IndexedDB是由浏览器提供的 (window.indexedDB) 本地数据库,由网页脚本 (JS) 创建和操控。WebStorage(localStorage) 只能存储少量的数据。如果本地需要存储较大且较复杂的数据,WebStorage就不够用了。因此,当我们...

    一. 前言

    IndexedDB 是由浏览器提供的 (window.indexedDB) 本地数据库,由网页脚本 (JS) 创建和操控。Web Storage(localStorage) 只能存储少量的数据。如果本地需要存储较大且较复杂的数据,Web Storage 就不够用了。因此,当我们需要在本地存储数据量较大且数据较复杂时,可以使用 IndexedDB.IndexedDB 不仅可以存储大量的结构化数据,它还提供了索引来实现对数据的高性能搜索。

     

    二. 基本概念

    1. IndexedDB 使用 key-value 键值对储存数据。value 数据可以是结构复杂的对象,key 可以是对象自身的属性.可以通过对对象中的任何属性创建索引来实现查询和列举排序。

    2. IndexedDB 是事务型数据库.所有的操作都发生在事务中。如果一个事务(一系列操作数据库的代码)一旦发生错误,数据库就会回滚到事务发生前的状态,也就避免了只修改一部分数据的情况发生。

    3. IndexedDB API 基本上是异步的。IndexedDB API不通过 return 语句返回数据,而是需要你提供一个回调函数来接收数据。

    当你需要对数据库进行某些操作(如存储或读取)时,可以通过调用 IndexedDB API,向数据库发送一个操作请求,操作完成后,数据库会通过你提供的回调函数返回结果给你。

    4. IndexedDB 是面向对象的。IndexedDB 要求你为一种数据(JS对象)创建一个对象仓库,可以将对象仓库看作是关系型数据库中表。注意:IndexedDB 不是关系型数据库,不支持 SQL 查询语句。

    5. IndexedDB 遵循同源(域名+协议+端口)策略。在同一个"源"中的数据库是唯一的.每个域名可以创建多个数据库。

     

    三. IndexedDB API

    1. IDBFactory 接口(工厂),window.indexedDB 对象实现了该接口,通过该对象(不是直接使用IDBFactory接口)来打开/创建和删除一个数据库。

    2. IDBDatabase 接口(数据库),该接口提供了一个数据库连接,通过连接可以创建/删除对象仓库、关闭数据库连接,以及获取指定对象仓库的事务对象。

    3. IDBObjectStore 接口(对象仓库),存储对象的,每个对象可以看做是一条数据记录,类似于关系型数据库的表格。

    4. IDBIndex 接口(索引),通过创建索引可以搜索任意字段,否则只能搜索默认字段(主键)。

    5. IDBTransaction 接口(事务),所有的读取和写入数据均在事务中完成.事务对象提供error、abort和complete三个事件用来监听操作结果。

    6. IDBRequest 接口(操作请求),所有的异步方法返回一个request对象.如果request对象成功执行了,结果可以通过result属性访问到,并且该request对象上会触发success事件。

    如果操作中有错误发生,一个error事件会触发,并且会通过result属性抛出一个异常。

    7. IDBCursor 接口(游标),用于遍历或迭代数据库中多个记录。

    8. IDBKeyRange 接口(键范围),根据键范围限定数据记录的范围,从 IDBObjectStore 和 IDBIndex 对象中检索记录。

     

    四. 小例子

    以下是自己写的小例子,有注释。。。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
    
    </body>
    <script>
        if (!window.indexedDB) {
            window.alert("您的浏览器不支持IndexedDB的稳定版本。")
        }
    
        // 客户数据
        const customerData = [
            { ssn: "111-11-1111", name: "Bill", age: 35, email: "bill@company.com" },
            { ssn: "222-22-2222", name: "Donna", age: 32, email: "donna@home.org" },
            { ssn: "333-33-3333", name: "Michelle", age: 55, email: "Michelle@home.org" },
            { ssn: "444-44-4444", name: "Mike", age: 29, email: "Mike@home.org" },
            { ssn: "555-55-5555", name: "Lily", age: 33, email: "Lily@home.org" },
            { ssn: "666-66-6666", name: "Cindy", age: 56, email: "Cindy@home.org" }
        ];
    
        // 数据库名
        const dbName = 'MyTestDatabase'
    
        // 打开数据库
        // 如果数据库不存在,open('数据库名','数据库版本号') 会创建该数据库,然后触发 onupgradeneeded 事件,
        // 如果数据库已存在,但指定更高数据库版本,会直接触发 onupgradeneeded 事件
        // 在 onupgradeneeded() 中,可以更新数据库模式,即创建或者删除对象仓库
        var request = window.indexedDB.open(dbName, 10);
        // 在 IndexedDB 中的大部分异步方法都是返回一个包含 result 或错误的 IDBRequest 对象
    
        // 失败处理函数:
        request.onerror = function (event) {
            alert(event.target.error);
        };
    
        // onupgradeneeded 事件是唯一可修改数据库模式的地方
        // 可以创建和删除对象存储空间以及构建和删除索引
        request.onupgradeneeded = function (event) {
            db = event.target.result;// 保存数据库连接
    
            // 对数据库连接添加一个错误处理程序
            db.onerror = function (event) { alert("Database error: " + event.target.errorCode); };
    
            if (db.objectStoreNames.contains('customers')) { // 检查数据仓库是否存在
                db.deleteObjectStore("customers"); // 删除对象仓库和相关的索引   
                alert("删除数据库成功!")
            }
    
            // 创建一个对象仓库来存储客户相关信息,对象仓库类似于关系型数据库的表格,ssn 作为键路径(key path)
            // createObjectStore('仓库名', 配置键类型)
            var objectStore = db.createObjectStore("customers", { keyPath: "ssn", autoIncrement: true }); // 创建对象仓库
    
            // 建立一个索引来通过姓名来搜索客户,名字可能会重复,所以不能使用 unique 索引
            // createIndex('索引名', '被索引的属性名', 可选的索引类型)
            objectStore.createIndex("name", "name", { unique: false });
            objectStore.createIndex("age", "age", { unique: false });
    
            // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
            objectStore.transaction.oncomplete = function (event) {
                // 启动一个事务:IDBDatabase.transaction(storeNames, mode)=>返回一个事务对象,可以通过该对象访问对象仓库
                // storeNames 作用域,想访问的对象仓库的数组
                // mode 事务模式,readonly(默认) 或 readwrite,注意:一个对象仓库只能运行一个 readwrite 事务
                var transaction = db.transaction(["customers"], "readwrite");
    
                // 注意:只能在创建事务时指定的对象仓库中取出一个对象仓库
                var customerObjectStore = transaction.objectStore("customers");
    
                // 1. 向数据库中增加数据
                customerData.forEach(function (customer) {
                    // 注意:add() 方法的调用时对象仓库中不能存在相同键的对象
                    customerObjectStore.get(customer.ssn).onsuccess = function (event) {
                        if (event.target.result) return alert("添加客户失败,社会保险号为: " + customer.ssn + " 的客户已存在...");
                        var request = customerObjectStore.add(customer);
                        request.onsuccess = function (event) { alert('添加了社会保险号为:' + event.target.result + ' 的客户...'); }
                    }
                });
            };
    
        }
    
        // 成功处理函数
        request.onsuccess = function (event) {
            db = event.target.result;// 保存数据连接
    
            // 对数据库连接添加一个错误处理程序
            db.onerror = function (event) { alert("Database error: " + event.target.errorCode); };
    
            var transaction = db.transaction(["customers"], "readwrite");
    
            // 注意:只能在创建事务时指定的对象仓库中取出一个对象仓库
            var customerObjectStore = transaction.objectStore("customers");
    
            // 1. 向数据库中增加数据
            customerData.forEach(function (customer) {
                // 注意:add() 方法的调用时对象仓库中不能存在相同键的对象
                customerObjectStore.get(customer.ssn).onsuccess = function (event) {
                    if (event.target.result) return alert("添加客户失败,社会保险号为: " + customer.ssn + " 的客户已存在...");
                    var request = customerObjectStore.add(customer);
                    request.onsuccess = function (event) { alert('添加了社会保险号为:' + event.target.result + ' 的客户...'); }
                }
            });
    
            // 2. 从数据库中删除数据
            customerObjectStore.get("444-44-4444").onsuccess = function (event) { // 3. 从数据库中获取数据
                if (event.target.result) { // 如果客户存在
                    return customerObjectStore.delete("444-44-4444").onsuccess = function (event) {
                        alert("删除了保险号为: 444-44-4444 的客户...");
                    };
                }
                alert("删除客户失败,保险号为: 444-44-4444 的客户不存在")
            }
    
            // 4. 更新数据库中的记录
            customerObjectStore.get("111-11-1111").onsuccess = function (event) { // 3. 从数据库中获取数据
                if (event.target.result) { // 如果客户存在
                    alert("获取了社会保险号为:111-11-1111 客户的姓名是: " + event.target.result.name + " ...");
                    var data = event.target.result; // 获取想要更新的数据
                    data.age = 28; // 更新想修改的数据
                    var updateRequest = customerObjectStore.put(data); // 把更新过的对象放回数据库
                    updateRequest.onerror = function (event) {
                        alert('更新社会保险号为: ' + data.ssn + "的客户的年龄为: " + data.age + " 失败...")
                    };
                    updateRequest.onsuccess = function (event) {
                        alert('更新社会保险号为:' + data.ssn + "的客户的年龄为:" + data.age + " 成功...")
                    }
                }
            };
    
            // 5. 通过索引获取数据
            // 通过创建索引可以搜索任意字段,否则只能搜索默认字段(主键)
            var nameindex = customerObjectStore.index("name"); // 通过对象仓库中获取指定名称的索引
            nameindex && (nameindex.get("Bill").onsuccess = function (event) {
                if (event.target.result) {
                    console.log("通过索引获取一下数据:")
                    console.log(event.target.result)
                }
            })
    
            // 6. 通过指针遍历数据
            customerObjectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;
                if (cursor) {
                    console.log("ssn:" + cursor.key + ",name:" + cursor.value.name);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了!');
                }
            }
    
            // 7. 通过指针(键范围)遍历数据
            var keyRangeValue = IDBKeyRange.bound(32, 55);
            var ageindex = customerObjectStore.index("age"); // 通过对象仓库中获取指定名称的索引
            if (ageindex) {
                ageindex.openCursor(keyRangeValue).onsuccess = function (event) {
                    var cursor = event.target.result;
                    if (cursor) {
                        console.log("ssn:" + cursor.value.ssn + ",age:" + cursor.key);
                        cursor.continue();
                    }
                }
            }
        };
    </script>
    
    </html>

     

    五. 配置键的方法:

    配置键也就是设置主键的生成方式。

    序号 keyPath(键路径) autoIncrement(键生成器) 描述
    1 no no

    可以存任意类型的值,包括基本数据类型(如数字或字符串),每当我们想要增加一个新值的时候,必须提供一个单独的键参数

    2 yes no

    只能存 JS 对象,且对象中必须有一个和 keyPath 同名的属性

    3 no yes

    可以存任意类型的值,自动生成键,如果想要使用一个特定键可以提供一个单独的键参数

    4 yes yes

    只能存 JS 对象,生成键同时会被存储在对象中和 keyPath 同名的属性中,但是如果该属性已经存在则会被直接用作键而不会生成新键

    展开全文
  • indexedDb

    2019-10-11 14:01:20
    参考教程:https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1

    参考教程:https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1

    展开全文
  • indexed DB

    2017-07-13 10:14:23
    随着浏览器的处理能力不断增强,产生了将大量数据储存在客户端能力的需求,这样可以减少用户等待从服务器获取数据的时间。...所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。 indexed DB(Ind

           随着浏览器的处理能力不断增强,产生了将大量数据储存在客户端能力的需求,这样可以减少用户等待从服务器获取数据的时间。现有的浏览器端数据储存方案,都不适合储存大量数据:Cookie 不超过4KB,且每次请求都会发送回服务器端;LocalStorage 在 2.5MB 到 10MB 之间(各浏览器不同)。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。

    indexed DB(Indexed Database API)是浏览器中保存结构化数据的一种数据库,其特点是:键值对储存、异步、支持事务、同域限制、储存空间大、支持二进制储存。( IndexedDB 支持事务意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回到事务发生之前的状态,不存在只改写一部分数据的情况。)

    1.首先需要根据不同浏览器的内核,创建indexedDB对象,如下:

    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
    打开一个数据库,打开数据库的结果时,有可能触发4种事件:

    *success:打开成功。
    *error:打开失败。
    *upgradeneeded:第一次打开该数据库,或者数据库版本发生变化。
    *blocked:上一次的数据库连接还未关闭。

    第一次打开数据库时,会先触发upgradeneeded事件,然后触发success事件。

    var request = indexedDB.open("数据库名称");
    request.onsuccess = function(event)
    {
    ……var db = event.target.result
    }
    request.onerror = function (event)
    {
    ……event.target.errorCode
    }
    openRequest.onupgradeneeded = function(event)
    {
    ……
    }
    2.获得数据库实例以后,就可以用实例对象的方法操作数据库。
    2.1 createObjectStore方法用于创建存放数据的“对象存储空间”(object store),类似于传统关系型数据库的表格。

    var store = db.createObjectStore("users",{keyPath: "username"});
    创建了一个名为users的对象存储空间,如果该对象存储空间已经存在,就会抛出一个错误。为了避免出错,需要用到objectStoreNames属性,检查已有哪些对象仓库。
    if(!db.objectStoreNames.contains("users")) {
         db.createObjectStore("users");
    }
    第二个参数中的keyPath属性就是空间中要保存的对象的一个属性,这个属性将作为存储空间的键来使用。
    var store = db.createObjectStore("users", { autoIncrement: true });
    autoIncrement属性表示,是否使用自动递增的整数作为键名(第一个数据为1,第二个数据为2,以此类推),默认为false。一般来说,keyPath和autoIncrement属性只要使用一个就够了。
    2.2 transaction方法用于创建一个数据库事务。向数据库添加数据之前,必须先创建数据库事务。
    var transaction = db.transaction("users",IDBTransaction.READ_WRITE);
    第一个参数可以使存储空间名称,也可以是多个存储空间名称字符串数组;第二个参数为访问模式(IDBTransaction.READ_WRITE、READ_ONLY、CHANGE);

    transaction方法返回一个事务对象,该对象的objectStore方法用于获取指定的对象仓库:

    var store = transaction.objectStore("users");
    transaction方法有三个事件:abort:事务中断;complete:事务完成;error:事务出错。 可以用来定义回调函数。
    transaction.objectStore("users")对象的方法,用于操作数据:

    (1)添加数据:add方法,第一个参数是所要添加的数据,第二个参数是这条数据对应的键名(key)。

    (2)读取数据:get方法,参数是数据的键名;

    (3)更新记录:put方法,put方法的用法与add方法相近。

    (4)删除记录:delete方法,参数是数据的键名。

    (5)删除所有对象:clear方法

    (6)遍历数据:openCursor方法

    这些方法都是异步操作,均返回请求对象,具有error和success事件;

    request = store.openCursor(键范围,游标方向);
    request.onsuccess = function(event){
        var cursor = event.target.result;
    }
    cursor: 属性--value、key、direction、primaryKey;方法--update()、delete()、continue(key)、advance(count)。

    键范围有四种定义方式:

    var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ;
    1: var onlyRange = IDBKeyRange.only(键) ;
    2.var lowerRange = IDBKeyRange.lowerBound(键,[true]);
    3. var upperRange = IDBKeyRange.upperBound(键,[true]);
    4. var boundRange = IDBKeyRange.bound(键, 键, [true/false], [true/false])
    参数true表示忽略此键的对象,从它的下一个对象开始;

    游标方向的设定:

    var IDBCursor= window.IDBCursor || window.webkitIDBCursor;
    request = store.openCursor(键范围, IDBCursor.NEXT/IDBCursor.PREV/IDBCursor.PREV_NO_DUPLICATE/IDBCursor.NEXT_NO_DUPLICATE);
    2.3 createIndex方法用于创建索引;可以指定数据对象的某个属性来建立索引。
    store.createIndex("name","name", {unique:false});
    store.createIndex("email","email", {unique:true});
    createIndex方法接受三个参数,第一个是索引名称,第二个是建立索引的属性名,第三个是参数对象,用来设置索引特性。unique表示索引所在的属性是否有唯一值。

    有了索引以后,就可以针对索引所在的属性读取数据。index方法用于从对象仓库返回指定的索引。

    var index = store.index("name"),
          request = index.openCursor();
    event.result.key中保存着索引键,event.result.value中保存对应对象
    var index = store.index("name"),
          request = index.openKeyCursor();
    event.result.key中保存着索引键,event.result.value中保存着主键
    var index = store.index("name");
    var request = index.get(name);
    event.result.value中保存对应对象

    var index = store.index("name");
    var request = index.getKey(name);
    event.result.value中保存着主键的值
    IDBIndex对象的属性:name、keyPath、cbjectStore、unique;

    对象存储空间的indexNames属性可以访问到该空间建立的所有索引;对象存储空间的deleteIndex(name)方法可以删除索引;

    2.4 并发问题

    如果浏览器的两个不同标签打开同一个页面,那么一个页面试图更新而另一个页面尚未准备就绪的数据库的问题就可能发生,因此每次成功打开数据库时,需要制定onversionchange事件处理程序,当同一个来源的另一个标签页调用setVersion()时就会执行这个回调函数,这个事件的最佳方式是立即关闭数据库db.close();

    调用setVersion()时,还需指定请求的onblocked事件处理程序,当你想要更新数据库版本但是另一个标签页已经打开数据库的情况下,就会触发这个事件,此时,最好先通知用户关闭其他标签页,然后再重新调用setVersion()。


    
    
    
    
    
    
    展开全文
  • indexeddb

    2012-11-09 15:58:57
    这里有indexeddb的一些使用,各种操作基本都包括,有的被注释   var key = null;  // Simply open the database once so that it is created with the required tables  $.indexedDB("MyECommerceSite&...
  • indexeddb_深入IndexedDB

    2020-08-30 08:48:03
    indexeddbIntroduction to IndexedDB IndexedDB简介 Create an IndexedDB Database 创建一个IndexedDB数据库 How to create a database 如何建立资料库 Create an IndexedDB Database 创建一个IndexedDB数据库 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,033
精华内容 1,613
热门标签
关键字:

indexeddb