当前位置: 首页 > news >正文

HTML本地存储之IndexedDB(1)

前言:因为项目的一些要求,所有的开发都是基于firefox5浏览器的,所以以下的总结都是基于firefox5而来。

1.1.    IndexedDB是索引型数据库,(同步未实现)现支持异步操作。使用时不能将浏览器设为隐私模式。

1.2.    IndexedDB可以存储任意格式的json object,而localStorage则只能存string

1.3.    IndexedDB数据库不同的源直接通过域名进行识别;不同的数据库,不同的表通过一个字符串(name)识别;表(ObjectStore)中识别不同的json对象,即key;1.键值对(一个key对应一个value)2.键路径(keypath对应表名.字段名)。

1.4.    IDB不允许数据库中的表在同一个版本中发生变化(创建新表或删除旧表的时候,必须使用一个不一样的版本号)。

1.5.    createObjectStore第一个参数是表的名称,第二个参数是可选的,是否需要自动增长。对表中数据的存取通常是在onsuccess事件之后进行的。

1.6.    IDBKeyRangestore.openCursor是用来遍历列表的,前者确定遍历的范围,后者根据前者的范围逐条触发onsuccess事件

1.7.   由于内核不同,所以window.indexedDB被改为了带有前缀的变量

1.8.       IndexedDB的基本操作如下所示:

1.打开一个数据库和启动一个事务.
2.创建一个存储对象. 
3.向数据库请求一些数据操作, 例如添加或者检索数据.
4.监听DOM事件来完成一些操作。
5.对结果集进行一些处理 (结果能通过请求对象获得).

1.9.       代码案例

连接数据库:


还可以指定数据库的版本号,如果数据库不是最新的,在这种情况下,后台就会自动触发onupgradeneeded事件,该事件里的一个CHANGE_VERSION事务允许你出处理存储的对象


成功和失败的回调函数:

异常处理在数据库对象上监听异常事件:


onupgradeneeded 处理函数是唯一个地方允许你修改数据库的结构和设计。在里面,你可以新建和删除存储的对象并可设置和移除指数


添加和移除数据,对新建的数据库进行任何操作之前,你需要开启一个事务,该事务来自数据对象,并且你必须为你想要操作的存储对象指定一个事务类型涉及到哪些存储对象。同时,你也要决定你是想要修改数据库还是只是需要读取数据。transaction()三个参数,第一个参数是存储对象的一个数组,第二个参数设置属性,(默认只读事务。写入,用READ_WRITE标识符)。


事务监听3种不同类型的DOM事件:error(异常),abort(中止)和complete(完成)。


对数据库中的数据进行操作


游标的使用,存储对象存储的所有记录一条一条读出来的话,类似遍历(游标与索引结合使用,读取数据的顺序(升序、降序)和指定范围)


参考网址:http://blackstone.blog.51cto.com/1282172/817757

                http://bulaoge.net/user.blg?dmn=g3g4&cid=0&pg=2

                https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB

相关文章:

  • 关于Web Worker的一些心得
  • 关于Web Worker的一些心得(二)
  • displaynone与visiblehidden的区别
  • html5横、竖屏状态 以及禁止横屏
  • Ext3.2转Ext4要点
  • html5 canvas 详细使用教程
  • SVG 与 Canvas:如何选择
  • Scrum敏捷开发简介
  • 浅谈对JS闭包的理解
  • 分享几款js矢量图类库
  • Swiper说明及API手册说明
  • 浏览器兼容性汇总
  • 关于Ajax的一些问题
  • js内存泄露问题
  • javascript小数乘法精确率问题
  • CentOS7 安装JDK
  • CSS居中完全指南——构建CSS居中决策树
  • ECS应用管理最佳实践
  • Fastjson的基本使用方法大全
  • Java IO学习笔记一
  • jquery ajax学习笔记
  • ReactNative开发常用的三方模块
  • SegmentFault 2015 Top Rank
  • ⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)
  • vue.js框架原理浅析
  • vue-router的history模式发布配置
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 分类模型——Logistics Regression
  • 我看到的前端
  • 详解NodeJs流之一
  • 优化 Vue 项目编译文件大小
  • 在weex里面使用chart图表
  • hi-nginx-1.3.4编译安装
  • Java总结 - String - 这篇请使劲喷我
  • 阿里云服务器如何修改远程端口?
  • 哈罗单车融资几十亿元,蚂蚁金服与春华资本加持 ...
  • ​3ds Max插件CG MAGIC图形板块为您提升线条效率!
  • #define
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • $Django python中使用redis, django中使用(封装了),redis开启事务(管道)
  • (2)STM32单片机上位机
  • (9)YOLO-Pose:使用对象关键点相似性损失增强多人姿态估计的增强版YOLO
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (附源码)spring boot公选课在线选课系统 毕业设计 142011
  • (接口自动化)Python3操作MySQL数据库
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (算法)Travel Information Center
  • (转载)虚函数剖析
  • *p++,*(p++),*++p,(*p)++区别?
  • .NET Framework 3.5中序列化成JSON数据及JSON数据的反序列化,以及jQuery的调用JSON
  • .NET/C# 如何获取当前进程的 CPU 和内存占用?如何获取全局 CPU 和内存占用?
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • .net实现头像缩放截取功能 -----转载自accp教程网