About IndexDB

HTML5:离线存储(缓存机制)-IndexDB

https://www.w3.org/TR/IndexedDB/ .. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="jquery-1.12.3.min.js"></script> <script type="text/javascript"> window.indexedD…

1.关系型数据库和非关系型数据库一致性: 事务完成时,必须让所有的数据具有一致的状态,例如要写入100个数据,前99个成功了,结果第100个不合法,此时事务会回滚到最初状态.这样保证事务结束和开始时候的存储数据处于一致状态. 关系型数据库: 一致性要求高,读写性能低,使用通用sql 非关系型数据库:灵活,key-value的形式,读写性能好,数据结构不固定 2.事务,ACID特性事务:指对数据库一个序列上的操作,比如先执行插入,再执行更改,两个操作按顺序执行, 要么都执行,要么都不执行. A…

html5 indexDB的使用

angular.module('indexdb', []) .factory('indexDbJs', [function() { const CurDBVersion = 10000; window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction ||…

HTML5项目笔记10：使用HTML5 IndexDB设计离线数据库

之前的文章(http://www.cnblogs.com/wzh2010/archive/2012/05/22/2514017.html)里面描述了HTML5 离线数据存储的Web SQL,一个基于SQLite 的离线数据库,不过W3C 的 WebDatabase 规范中说这份规范不再维护了,取而代之的是IndexDB,一个NoSQL类型的数据库. Html5Rocks把他们的优缺点做了比对,IndexDB综合看来有如下优点: 允许快速索引和搜索的对象,所以在HTML5 的 web应用程序中,…

indexDB的使用和异步图片blob文件保存

//调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.m…

使用ES6 Class封装的IndexDB 操作类，并实现模糊搜索

封装如下: indexDBOperate.js export class IndexDBOperate { db = null // 数据库实例 databaseName = null // 数据库名称 version = null // 数据库版本 objStoName = null // 表或对象仓库名称 constructor(databaseName, version, objStoName, indexObj, successFunc) { this.databaseName = d…

JS 客户端（浏览器）存储数据之 localStorage、sessionStorage和indexDB

基本概念 1.localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式,在IE7以上以及大多数浏览器都是支持的 2.localStorage和sessionStorage的区别: (1).localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. (2).他们都是只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). (3).localStorage生命周期是永久,这意味着…

indexDB的概念

IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本. 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据键值的方式来保存数据,只要创建索引,就可以进行数据搜索和排序. 2. 交易数据库模型 IndexDB进行数据库操作之前要先进行交易.所谓交易,就是将数据库所做的访问操作(比如增删改查)包装成一个任务来执行,这个任务可以包含多个步骤,只有所有的步骤执行成功,交易才算成功:只要有一个步骤失败,整个交易就…

indexdb开cai发keng实zhi践lu

一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多像素的时候. 之前是通过存储到localStorage来进行存储到下个页面用的,但是localStorage遇到3千多高度转出来的base64也是望长兴叹了,这时候就引入了==indexdb==-本地数据库的东西 indexdb 简介 IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本…

indexDB出坑指南

对于入了前端坑的同学,indexDB绝对是需要深入学习的. 本文针对indexDB的难点问题(事务和数据库升级)做了详细的讲解,而对于indexDB的特点和使用方法只简要的介绍了一下.如果你有一些使用indexDB的经验的话,本文一定能让你有更深的收获!但如果你尚需要一个详尽教程的话,为你推荐教程使用indexDB. indexDB的特点优点: indexDB 大小取决于你的硬盘,可以说是不受限的可以直接存储任何 js 数据,包括blob(其实是支持结构化克隆的数据),不像 storage…

indexDB解决过的难题

我第一次使用indexDB是1年前(2018年10月),运用这个黑科技,解决过3个异常棘手的问题(如果不是indexDB 几乎找不到其他解决方案)所以我经常强调,前端一定要学indexDB! 难题一:本地超大json数据的读取和解析当时我是负责一个办案app的研发(老项目维护),这是个政府项目,app的使用是在离线环境下进行的,主要运行在特定平板上.打开app,先进行身份验证,验证通过后会读取并展示本地案件数据.这些数据都是通过文件形式存储的,是用户从电脑上拷贝下来的,主要是很多图片,以及这些…

IndexDB

参考:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html cookie localStorage IndexedDB 大小不超过4KB 2.5MB-10MB 存储大量数据(不少于250MB) 区别每次请求都会发送回服务器不提供搜索功能,不能建立自定义的索引提供查找接口,还能建立索引同步异步特点: 1)IndexedDB 不属于关系型数据库(不支持 SQL 查询语句) 2)键值对储存所有类型的数据都可以直接存入,包…

hmtl5 web SQL 和indexDB

前端缓存有cookie,localStorage,sessionStorage,webSQL,indexDB: cookie:有缺点 localStorage:功能单一 sessionStorage:会话级 webSQL:仅谷歌支持(标准查询语句) 重点-------------------indexDB IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作.IndexedDB 允许储存大量数据,提供查找接口,还能建立索引.这些都是 LocalStorage 所不具备的.就…

IndexDB 操作util

https://dexie.org/ https://www.tangshuang.net/5668.html https://github.com/tangshuang/hello-indexeddb https://www.tangshuang.net/5681.html…

vue中indexDB的应用

// indexedDB.js,浏览器本地数据库操作 export default { // indexedDB兼容 indexedDB: window.indexedDB || window.webkitindexedDB || window.msIndexedDB || mozIndexedDB, // 打开数据库 // 新对象储存空间newStore参数:newStore.name.newStore.key // 新增对象存储空间要更改数据库版本 openDB: function (dbn…

IndexDB的基本操作

1.前端存储的一个数据库. 2.介绍一下基本操作. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="input" / placeholder="请输入内容">…

htm5本地存储方案——indexdb的封装

不BB直接上代码 /*封装IndexdDB*/ var localDatabase = { }; localDatabase.dbName = "yiliDB"; localDatabase.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; localDatabase.db = null; localDatabase.IDBKeyRan…

如何使用indexdb

一.实现步骤 1)获得indexedDB对象 if (!window.indexedDB) { window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB; //webkit是chrome } 2)打开数据库 var openDBRequest = indexedDB.open("person",3); //第二个参数为版本 var openDBRequest = ind…

indexDB操作(部分方法不太会使用)

http://blog.csdn.net/bd_zengxinxin/article/details/7758317 HTML5 - Storage 客户端存储 http://html5demos.tfan.org/storage…

indexDB的用法

本文转自http://www.ruanyifeng.com/blog/2018/07/indexeddb.html,为了方便个人整理学习笔记所用一.概述随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器:LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立…

《高性能javascript》一书要点和延伸（下）

第六章快速响应的用户界面本章开篇介绍了浏览器UI线程的概念,我也突然想到一个小例子,这是写css3动画的朋友都经常会碰到的一个问题: <head> <meta charset="UTF-8"> <title>Title</title> <style> div{width:50px; height:50px; background:yellow;} .act{width:100px;transition:width 0.5s…

JavaScript资源大全中文版（Awesome最新版）

Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等. 前端MVC框架与库 angular.js - 前端MVVM框架,支持双向绑定,实现MVC架构,增强Web应用 aurelia - A Javascript client framework for mobile, desktop and web. backbo…

HTML5 学习总结（三）——本地存储

一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会使用Cookie,但Cookie有一些缺点,为了说明这个缺点我们先看看当提交表单时会有那些信息会被浏览器收集后发送到服务器. 1.1.提交表单发送到服务器的信息 1).带name的可用表单元素 2).url 3).客户端请求头部信息 4).cookie <%@ page language="j…

跨域之同源策略 Same-origin policy

同源策略是浏览器中最基本的隔离潜在恶意文件的安全策略,他限制了来自不同源(origin)的文档或脚本之间的相互作用. 何谓同源在跨域之URL中介绍过一个URL的标准格式如下: 协议类型://服务器地址(必要时需加上端口号)/路径/文件名对比URL的标准格式,这里的同源就是指: 协议类型相同(protocol) 服务器地址相同(host,也可以叫域名相同) 端口相同(port,一般默认为80) 下面是维基百科上的例子. 假如一个URL为http://www.example.com/dir/pa…

五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准.就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准. 当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程.如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,需要对各个浏览器对这两种新技术的支持情况有一个全面了解.本文是一份IE,Chro…

深入理解jsonp跨域请求原理

在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中可以配合服务端来解决,在响应头中加入Access-Control-Allow-Origin:* 1.同源: 同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口号完全相同 1.1目的:保护用户信息安全 1.2限制:cookie.localStorage和IndexDB无法读取无法操作跨域…

HTML5存储之 indexedDB

IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API.同时还有助于本地缓存数据,是Web应用程序可以更快的运行和相应,提高用户的体验度. 那么说了这么多,IndexedDB这个到底是个什么东东呢 ? 我个人理解IndexedDB 就是一种能在浏览器中持久地存储结构化数据的数据库,并且为WEB应用提供了丰富…

JavaScript资源大全中文版（Awesome最新版--转载自张果老师博客）

JavaScript资源大全中文版(Awesome最新版) 目录前端MVC 框架和库包管理器加载器打包工具测试框架框架断言覆盖率运行器 QA 工具基于 Node 的 CMS 框架模板引擎数据可视化编辑器 UI 输入日历选择文件上传其它提示模态框和弹出框滚动菜单表格/栅格框架手势地图视频/音频动画图片处理 ECMAScript 6 软件开发工具包(SDK) 利器精品阅读更多资源园友推荐: Awesome系列的JavaScript资源…

Notes:indexedDB使用

indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window.indexedDB即可调用. 要使用indexDB数据库,首先得打开它,使用open方法,可以给该方法指定数据库名与版本号,如该数据库存在则发送一个打开它的请求,如不存在则创建一个数据库并打开它的请求.该方法返回一个IDBRequest对象 var request = indexedDB.open…

【About IndexDB】的更多相关文章