indexdb开cai发keng实zhi践lu
一直在维护一个用html2canvas截图转base64保存的项目,先不说html2canvas不同版本的不同坑的问题,就说转出来的这个base64字符长度实在太大了,尤其是遇到设计出图高度达到3千多像素的时候。
之前是通过存储到localStorage来进行存储到下个页面用的,但是localStorage遇到3千多高度转出来的base64也是望长兴叹了,这时候就引入了indexdb-本地数据库的东西
indexdb
- 简介
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库()
- 特点
(1)键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
(2)异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
(3)支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
(4)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库 。
(5)储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
(6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)
对没错,以上内容都是从阮老师那儿抄过来的,可以看看了解下。下面是具体使用包含增删改查指路
let indexdb = indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if (indexdb) {
// < !--创建本地数据结构-->
var myDB = {
name: 'mydb001',
version: 1,
db: null,
ojstore: {
name: 'myTableName',//存储空间表的名字
keypath: 'id'//主键
}
};
var INDEXDB = {
indexedDB: window.indexedDB || window.webkitindexedDB,
IDBKeyRange: window.IDBKeyRange || window.webkitIDBKeyRange,//键范围
openDB: function (dbname, dbversion, callback) {
//建立或打开数据库,建立对象存储空间(ObjectStore)
var self = this;
var version = dbversion || 1;
var request = self.indexedDB.open(dbname, version);
request.onerror = function (e) {
console.log(e.currentTarget.error.message);
};
request.onsuccess = function (e) {
myDB.db = e.target.result;
console.log('成功建立并打开数据库:' + myDB.name + ' version' + dbversion);
};
request.onupgradeneeded = function (e) {
var db = e.target.result, transaction = e.target.transaction, store;
if (!db.objectStoreNames.contains(myDB.ojstore.name)) {
//没有该对象空间时创建该对象空间
store = db.createObjectStore(myDB.ojstore.name, { keyPath: myDB.ojstore.keypath });
console.log('成功建立对象存储空间:' + myDB.ojstore.name);
}
}
},
putData: function (db, storename, data) {
//添加数据,重复添加会更新原有数据
var store = db.transaction(storename, 'readwrite').objectStore(storename), request;
for (var i = 0; i < data.length; i++) {
request = store.put(data[i]);
request.onerror = function () {
console.error('put添加数据库中已有该数据')
};
request.onsuccess = function () {
console.log('put添加数据已存入数据库')
let href = '';
loading({
typeId: 'hideLoading',//string
data: {}
}, function (result) {//回调函数
})
};
}
},
clearData: function (db, storename) {
//删除存储空间全部记录
var store = db.transaction(storename, 'readwrite').objectStore(storename);
store.clear();
console.log('已删除存储空间' + storename + '全部记录');
}
}
var myTableName = [{
id: 'imgUrl',
name: dataURL
},];
INDEXDB.openDB(myDB.name, myDB.version);
setTimeout(function () {
// console.log('******************删除全部数据************');
INDEXDB.clearData(myDB.db, myDB.ojstore.name);
// console.log('*******************put重复添加*************************');
INDEXDB.putData(myDB.db, myDB.ojstore.name, myTableName);
}, 100)
}
indexdb开cai发keng实zhi践lu的更多相关文章
- 通什翡翠商城大站协议邮件群发系统日发20-30万封不打码不换ip不需发件箱100%进收件箱
用一种新的技术思维去群发邮件一种不用换IP,不需要任何发件箱的邮件群发方式一种不需要验证码,不需要**代码变量的邮件群发方式即使需要验证码也能全自动识别验证码的超级智能软件教你最核心的邮件群发思维和软 ...
- php获取汉字的拼音 拼音首字母
/***获取汉字的拼音*/function pinyin($s, $isfirst = false) { static $pinyins; $s = trim($s); $len = strlen($ ...
- [C#] 汉字转拼音,支持多音字
这份代码大概不是严格意义上正确的,但是一般场景用用应该没问题. using System; using System.Collections.Generic; using System.Linq; u ...
- Go语言从入门到放弃(二) 优势/关键字
本来这里是写数据类型的,但是规划了一下还是要一步步来,那么本篇就先介绍一下Go语言的 优势/关键字 吧 本章转载 <The Way to Go>一书 Go语言起源和发展 Go 语 言 起 ...
- C#获取包括一二级汉字的拼音 首字母
C#获取包括一二级汉字的拼音 首字母 声母 汉字拼音转换 using System; using System.Collections.Generic; using System.Linq; usin ...
- 【C#公共帮助类】 Utils 10年代码,最全的系统帮助类
为大家分享一下个人的一个Utils系统帮助类,可能有些现在有新的技术替代,自行修改哈~ 这个帮助类主要包含:对象转换处理 .分割字符串.截取字符串.删除最后结尾的一个逗号. 删除最后结尾的指定字符后的 ...
- 【C#公共帮助类】 Utils最全的系统帮助类
最近闲的没事做,自己想着做一些东西,不知不觉居然在博客园找到了这么多公共类,感觉还是挺有用的,平时自己还是用到了好多,就是缺少整理,现在为大家分享一下一个Utils系统帮助类,可能有些现在有新的技术替 ...
- c++资源之不完全导引 (转)
c++资源之不完全导引 (转) 转:http://www.cnblogs.com/suiyingjie/archive/2008/02/24/1079411.html 本文2004年5月首发于< ...
- C#字符操作
//字符串转ASCII码 // str1:字符串 str2:ASCII码 ] })[] == )//判断输入是否为字母 { str2= Encoding.GetEncoding(].ToString( ...
随机推荐
- oracle dbms_repcat_admin能带来什么安全隐患
如果一个用户能执行dbms_repcat_admin包,将获得极大的系统权限. 以下情况可能获得该包的执行权限: 1.在sys下grant execute on dbms_repcat_admin t ...
- 基于OSS+DataLakeAnalytics+QuickBI的Serverless的查询分析和可视化BI
基于OSS的数据查询分析和可视化BI报表 数据存储在OSS后,有多种查询分析的方法,包括阿里云MaxCompute.DataLakeAnalytics产品等Severless查询分析服务,也可以自建S ...
- js、php判断手机PC
用于phpcms <script type="text/javascript"> var url = window.location.href; if(/Android ...
- 洛谷4137 mex题解 主席树
题目链接 虽然可以用离线算法水过去,但如果强制在线不就gg了. 所以要用在线算法. 首先,所有大于n的数其实可以忽略,因为mex的值不可能大于n 我们来设想一下,假设已经求出了从0到n中所有数在原序列 ...
- 【转载】Ubuntu终端常用的快捷键
Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快捷键如下: 快捷键 功能 Ta ...
- ios程序员6级考试(答案和解释)
http://blog.sunnyxx.com/2014/03/06/ios_exam_0_key/ 我是前言 上次发了个ios程序员6级考试题 ,还在不断补充中,开个帖子配套写答案和解释. 1. 下 ...
- HDU-1260_Tickets
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Des ...
- @loj - 2865@ 「IOI2018」狼人
目录 @description@ @solution@ @accepted code@ @details@ @description@ 在日本的茨城县内共有 N 个城市和 M 条道路.这些城市是根据人 ...
- 自定义View系列教程02--onMeasure源码详尽分析
深入探讨Android异步精髓Handler 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架(1)- 核心基础 Android多分辨率适配框架(2)- 原理剖析 Andr ...
- 《C语言深度解剖》学习笔记之内存管理
第5章 内存管理 1.野指针 定义指针变量的同时最好初始化为NULL,用完指针后也将变量的值设置为NULL.也就是说除了使用时,别的时间都把它设置为NULL 2.堆,栈和静态区 堆:由malloc系列 ...