文档章节

indexedDB 小结

MoranZhu
 MoranZhu
发布于 2015/12/14 20:23
字数 1076
阅读 45
收藏 0
点赞 0
评论 0

1.indexedDB简介

       使用indexedDB之前,最好使用以下代码,兼容不同浏览器。

 //数据库对象
window.indexedDB =window.indexedDB||window.webikitIndexedDB||window.mozIndexedDB||window.msIndexedDB;
//数据库事务
window.IDBTransaction = window.IDBTransaction||window.webikitIDBTransaction||window.mozIDBTransaction||window.msIDBTransaction;
//数据库查询条件
 window.IDBKeyRange = window.IDBKeyRange||window.webkitIDBKeyRange||window.mozIDBKeyRange||window.msIDBKeyRange;
//游标
window.IBDCursor =  window.IBDCursor ||window.webkitIBDCursor ||window.mozIBDCursor ||window.msIBDCursor ;

2.数据库中常用的操作

   2.1 创建及删除数据库

        创建:

  var  dbCon = indexedDB.open(dbName,dbVersion); 
        open()方法参数名为数据库名称和数据库版本。如果该数据库不存在,则会自动创建。
        删除:
        var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
   dbCon.onsuccess = function(e){//连接成功
                idb = e.target.result;
                //你的操作
        }
         dbCon.onerror= function(e){//连接失败 
                //你的操作
        }



 2.2  创建及删除对象仓库,相当于关系数据库中的表

      indexedDB中的数据库操作必须要在事务中进行,事务分为三类:

      只读事务,读写事务,版本更新事务。

      对数据仓库只进行  读  操作,可以使用  只读事务。 readonly

      添加 、修改、删除数据的操作必需要使用,读写事务。  readwrite

      创建、删除数据仓库必须使用版本更新事务,设置数据库的新版本号。设置新的版本号之后再连接数据库时,回先出发  onupgradeneeded  事件  ,然后再出发  onsuccess数据库连接成功事件。

     

    创建和删除数据仓库:

dbCon.onupgradeneeded = function(e){
console.log('连接升级!');
var libdb = e.target.result;
libdb.createObjectStore('newBooks',{keyPath:'id',autoIncrement:true});
    //createObjectStore()方法的两个参数分别为创建数据仓库的名称,以及一个对象包括数据仓库主键keyPath属性,以及主键是否自增长。
// libdb.deleteObjectStore('books');
   //deleteObjectStore('books');删除数据仓库方法,参数为数据仓库名称
};


 

  操作数据仓库:

     创建事务:

     var  txn = idb.transaction(objectStoreName,mode);  

     第一个参数为操作中需要用到的数据仓库,如果只涉及一个,可以直接传递数据仓库名称字符串,如果涉及多个,则将其放入数组中,然后将数组传入,第二个参数为事务模式,只读事务为  readonly ,读写事务均为  readwrite.

    var libtxn = idb.transaction('newBooks','readwrite');//创建事务
    var libstore = libtxn.objectStore('newBooks');//获取数据仓库对象,也可以是数组
    libstore.put({isbn:1001,title:'love',author:'Jim Jack'});//添加数据,若指定主键存在,则更新数据
    libstore.add({isbn:1002,title:'family',author:'J.K Rolling'});//添加数据,若制定逐渐存在则插入失败
    libstore.delete(key);//参数要删除数据的键
    libstore.count();//数据仓库中共有多少个数据对象



    所操作数据仓库不相关的事务可以同时执行,操作有相同数据仓库的两个事务,即使其中一个为只读事务也不能同时执行。

    (两个都是只读事务应该可以同时执行。本人猜测~~~)


创建和删除索引:

      在indexedDB数据库中,只能针对 被设为索引的属性值进行检索,不能针对没有被设为索引的属性值进行检索。

        
    dbCon.onupgradeneeded = function(e){
    console.log('连接升级!');
    var libdb = e.target.result;
    var stroe =  libdb.createObjectStore('newBooks',{keyPath:'id',autoIncrement:true});
    //createObjectStore()方法的两个参数分别为创建数据仓库的名称,以及一个对象包括数据仓库主键keyPath属性,以及主键是否自增长。
   var  name = 'indexName';  //索引名称
     var  indexProp = 'id';//索引属性
     var  opts = { unique:false, multiEntry:false };//配置索引
      var   idx =  stroe.createIndex(name,indexProp , opts);
       // stroe.deleteIndex("indexName");删除索引
};



游标:

         先创建事务,获取数据仓库对象,然后使用对象仓库的 openCursor  方法 可以创建游标。

                        //此处略去创建事务,获取数据仓库对象的代码

         var range = IDBKeyRange.bound();返回一个由一批数据的主键值组成的IDBKeyRange集合对象,当游标打开时,该集合中的主键值所指向的数据均被读取到游标中。
                        //IDBKeyRange.bound()      共有四个参数(低,高,低开集或闭集,高开集或闭集);
   //
IDBKeyRange.lowerBound()     两个参数 
(低,低开集或闭集);  大于某一值
   //
IDBKeyRange.upperBound()     
两个参数 
(高,高开集或闭集); 小于某一值
  //
IDBKeyRange.only()                 等于某一值
var direction = 'next';        //指定游标读取方向
var req = store.openCursor(range,direction);//打开游标
req.onsuccess = function(){     //打开游标为异步处理,打开成功时响应onsuccess方法
var cursor = this.result;
if(cursor){
showData(cursor.value);
cursor.continue();
}
}

 复合索引是一个索引指定多个索引属性,与单个索引操作类似。

















© 著作权归作者所有

共有 人打赏支持
MoranZhu
粉丝 1
博文 1
码字总数 1076
作品 0
武汉
IndexedDB 打造靠谱 Web 离线数据库

在知乎和我在平常工作中,常常会看到一个问题: 前端现在还火吗? 这个我只想说: 隔岸观火的人永远无法明白起火的原因,只有置身风暴,才能找到风眼之所在 ——『秦时明月』 你 TM 看都不看...

前端小吉米 ⋅ 05/21 ⋅ 0

新一代的前端存储方案--indexedDB

前端存储   我们都知道在前端开发当中,有时会因为某些需求,要将一些数据存储在前端本地当中.比如说:为了优化性能,将一些常用的数据存在本地,这样以后需要的时候直接从本地拿,不需要再向后端...

玉鸯 ⋅ 05/27 ⋅ 0

本地存储Cookie、Session/Local、indexDB、ServiceWork

有兴趣的朋友可以一起讨论,个人博客 在日常开发中,开发者用得最多的大概是前三种吧,cookie、Session/Local,对后两种运用的较少,话不多少,直接正文: cookie cookie是客户端的解决方案,...

⋅ 06/11 ⋅ 0

5 月全球浏览器市场份额:Chrome 再次出现下滑

NetMarketShare 公布了最新的浏览器市场份额数据,排名前三的分别是:Chrome、Internet Explorer 和Firefox 。 Chrome 浏览器依然是全球最受欢迎的桌面浏览器,但从 4 月起已出现轻微下滑趋势...

王练 ⋅ 06/03 ⋅ 0

Google Chrome 67稳定版发布:共计修复34处安全漏洞

今天Google正式放出了Chrome 67稳定版,目前已经面向Windows、Mac和GNU/Linux平台开放下载。Chrome 67版本中,Google继续推进Site Isolation功能来提升Chrome浏览器的整体安全性能,降低和保...

稿源:cnBeta.COM ⋅ 05/30 ⋅ 0

Firefox 60 正式发布:提升性能并更注重用户隐私的保护

Firefox 60 已正式发布。 下载地址:https://www.mozilla.org/zh-CN/firefox/all/ 官方的发布说明显示,该版本包含的更改为用户提供了更多内容和更多方法来定制自己的 New Tab/Firefox Home...

局长 ⋅ 05/10 ⋅ 21

扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂 ⋅ 06/01 ⋅ 0

TensorFlow.js 0.11.1 发布,在浏览器中训练 ML 模型

TensorFlow.js 是一个开源硬件加速 JavaScript 库,用于训练和部署机器学习模型。 TensorFlow.js 0.11.1 已发布,包含大量更新: Add capability to save and load s using the following me...

王练 ⋅ 05/20 ⋅ 0

Google Chrome v67.0.3396.62 正式版发布

谷歌浏览器Google Chrome稳定版迎来v67正式版首个版本发布,详细版本号为v67.0.3396.62,上一个正式版v66.0.3359.181发布于5月11日,时隔14天Google又发布了新版Chrome浏览器,本次升级主要是...

N软网 ⋅ 05/30 ⋅ 0

又问我哪个log先输出?我们把promise和eventloop放一起谈谈吧

废话就不多说了,这篇文章就不再聊关于promise的各种好处和用法了,如果不了解请自行Google啦! 我相信很多人在面试的时候遇到过这样一道面试题: 那么你的答案是什么呢? 粘贴到chrome的控制...

beth_miao ⋅ 05/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

使用 vue-cli 搭建项目

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli 一、 安装 node.js 首先需要安装node环境,可以直接到中...

初学者的优化 ⋅ 15分钟前 ⋅ 0

设计模式 之 享元模式

设计模式 之 享元模式 定义 使用共享技术来有效地支持大量细粒度对象的复用 关键点:防止类多次创建,造成内存溢出; 使用享元模式来将内部状态与外部状态进行分离,在循环创建对象的环境下,...

GMarshal ⋅ 30分钟前 ⋅ 0

SpringBoot集成Druid的最简单的小示例

参考网页 https://blog.csdn.net/king_is_everyone/article/details/53098350 建立maven工程 Pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM......

karma123 ⋅ 今天 ⋅ 0

Java虚拟机基本结构的简单记忆

Java堆:一般是放置实例化的对象的地方,堆分新生代和老年代空间,不断未被回收的对象越老,被放入老年代空间。分配最大堆空间:-Xmx 分配初始堆空间:-Xms,分配新生代空间:-Xmn,新生代的大小一...

算法之名 ⋅ 今天 ⋅ 0

OSChina 周日乱弹 —— 这么好的姑娘都不要了啊

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @TigaPile :分享曾惜的单曲《讲真的》 《讲真的》- 曾惜 手机党少年们想听歌,请使劲儿戳(这里) @首席搬砖工程师 :怎样约女孩子出来吃饭,...

小小编辑 ⋅ 今天 ⋅ 8

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部