如果传入的数据库版本比浏览器实际最新的版本低,则会抛出一个错误。 3. 表-对象仓库 某项业务的数据集合,有三种类型 对象型仓库。...在值对象中,获取一个节点值的属性链式方法的字符串表达 自动生成。...将没有keyPath,只有自增的key 值 字符串 日期类型 对象 数组 文件 Blob 图像数据 ArrayBuffer 无法存储function等非结构化数据 6....,将添加失败 osc.add({ name: '张三', sex: '男', other:{ age: 18 } }); 看一下添加结果: 添加失败与事务回滚 当我们试图插入一条keyPath...与已有记录的keyPath相同的记录时,将会失败,如果同一张表还有其他操作,将随事务回滚也一起失败。
error 的错误。...IndexedDB 在结果准备好之后通过DOM事件通知用户 IndexedDB是面向对象的。indexedDB不是用二维表来表示集合的关系型数据库。这一点非常重要,将影响你设计和建立你的应用程序。...具体数据 key/value key generator: 相当于以一种 id++ 的形式来生成一个 key 值。...key: 这个 key 的值,可以通过三种方式生成。 a key generator, a key path, 用户指定的值。并且,这个 key 在当前的 Object Store 是唯一的。...如果你打开更新后的版本号的话,还需要监听 onupgradeneeded 事件来实现。最常通过 indexedDB.open 遇见的错误就是 VER_ERR 版本错误。
Cookie、IndexedDB 等数据 甚至可以将这些信息上传至自己的服务器,在用户不知情的情况下伪造一些转账请求等信息 什么是同源策略 如果两个 URL 的协议、域名和端口都相同,称两个 URL...Referer 值 CSRF Token 在浏览器向服务器发起请求时,服务器生成一个 CSRF Token,其本质是服务器生成的字符串,然后将该字符串植入到返回的页面中 <!...但是渲染进程并不负责将图片显示到界面上,而是将最终生成的图片提交给浏览器的内核模块,由浏览器内核模块负责显示图片。...和 service-random 后,使用相同的方法将 client-random 和 service-random 混合生成一个密钥 master-secret,有了密钥 master-secret...注意,pre-master 是经过公钥加密之后传输的,所以黑客无获取到 pre-master,这样就无法生成密钥,以此保证黑客无法破解传输过程中的数据。
本文将通过一个小教程向你介绍 IndexedDB,并将 IndexedDB 与其他可用选项进行比较。...通常当服务器响应一个请求时,它们可能包含一个 SET-COOKIE 头,给浏览器一个要存储的键和值。然后,客户端应该在未来的请求头中包含这个 cookie,这将允许服务器识别浏览器会话等。...IndexedDB 是基于事件的,这符合它的异步模型。接下来,让我们看看数据库启动时可能发生的事件。首先,我们将监听 request.onerror 事件,以防访问数据库时出现任何错误。...: clear: 删除 store 中的所有记录 add:用给定的 id 插入一个记录(如果它已经存在就会出错) put:用给定的 id 插入或更新一个记录(如果已经存在就会更新) get:用特定的 id...在互联网连接中,你可能希望将 indexedDB 与外部数据库同步,以便在用户清除浏览器数据时不会丢失用户的信息。
cookie存储数据的功能已经很难满足开发所需,逐渐被Web Storage、IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点。...的原理及其构成 简单的HTTP请求过程 第一次访问网站的时候,浏览器发出请求,服务器端生成 cookie在响应中通过Set-Cookie头部告知客户端(允许多个Set-Cookie头部传递多个值),客户端得到...所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。...异步 IndexedDB的设计几乎完全是异步的。为此,大多数操作以请求的形式执行,这些请求会异步执行,产生成功的结果或错误。...("admin", 1) // 使用IndexedDB失败时的监听函数 request.onerror = function(event) { console.log('无法使用IndexedDB
Encryption:通过将模式字段设置为encrypted,该字段的值将以加密模式存储,没有密码就无法读取。...它是使用纯的 JavaScript 实现,不依赖其它库,提供的 API 是 MongoDB API 的子集,重要的是它的速度非常快: 插入:10,680 ops/s 查找:43,290 ops/s 更新...是 IndexedDB 的包装库,它提供了一套经过精心设计的 API,强大的错误处理,较强的可扩展性,此外它能够跟踪数据变化,支持 KeyRange (搜索不区分大小写,可设置匹方式和 OR 操作)。...Dexie.js 主要为了解决原生 IndexedDB API 中存在的三个主要问题: 异常错误处理。 较弱的查询功能。 代码复杂性。...事件确保在插入数据前对象仓库已经创建完毕 objectStore.transaction.oncomplete = function(event) { // 将数据保存到新创建的对象仓库
,会使一些编写不标准的网页无法正确显示。...然后⾃⼰⽣成⼀个伪造的公钥,发给客户端客户端收到伪造的公钥后,⽣成加密hash值发给服务器中间⼈获得加密hash值,⽤⾃⼰的私钥解密获得真秘钥,同时⽣成假的加密hash值,发给服务器服务器⽤私钥解密获得假密钥...()方法产生的Promise实例的返回值8、Promise.resolve()将现有对象转为Promise对象,如果该方法的参数为一个Promise对象,Promise.resolve()将不做任何处理...3)Promise缺点1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。...4)简单代码实现 最简单的Promise实现有7个主要属性, state(状态), value(成功返回值), reason(错误信息), resolve方法, reject方法, then方法class
cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点。...cookie的值,根据cookie值的内容就可以判断和恢复一些用户的信息状态。...3.Cookie的原理及生成方式 Cookie的原理 ?...Cookie的生成方式主要有两种: 生成方式一:http response header中的set-cookie 我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。...对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代,本文将介绍这几种存储方式的差异和优缺点。...cookie的值,根据cookie值的内容就可以判断和恢复一些用户的信息状态。...3.Cookie的原理及生成方式 Cookie的原理 第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会在响应头里面添加一个Set-Cookie选项,将cookie放入到响应请求中,在浏览器第二次发请求的时候...Cookie的生成方式主要有两种: 生成方式一:http response header中的set-cookie 我们可以通过响应头里的 Set-Cookie 指定要存储的 Cookie 值。...对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
Encryption:通过将模式字段设置为encrypted,该字段的值将以加密模式存储,没有密码就无法读取。...它是使用纯的 JavaScript 实现,不依赖其它库,提供的 API 是 MongoDB API 的子集,重要的是它的速度非常快: 插入:10,680 ops/s 查找:43,290 ops/s 更新...https://github.com/dfahlander/Dexie.js ❞ Dexie.js 是 IndexedDB 的包装库,它提供了一套经过精心设计的 API,强大的错误处理,较强的可扩展性...Dexie.js 主要为了解决原生 IndexedDB API 中存在的三个主要问题: 异常错误处理。 较弱的查询功能。 代码复杂性。...事件确保在插入数据前对象仓库已经创建完毕 objectStore.transaction.oncomplete = function(event) { // 将数据保存到新创建的对象仓库
现在,我们通过事务向数据库indexedDB-test的 对象存储空间movies中插入数据: 通过事务对象transaction,在objectStore()方法中指定对象存储空间,就得到了可以对该对象存储空间进行操作的对象...向数据库中增加数据,add()方法增加的对象,若是数据库中已存在相同的主键,或者唯一性索引的键值重复,则该条数据不会插入进去; 增加数据还有一个方法: put(), 使用方法和add()不同之处在于,数据库中若存在相同主键或者唯一性索引重复...,则会更新该条数据,否则插入新数据。...我们向数据库中插入一条数据,使title重复: 使用索引title获取title值为寻梦环游记的对象: 我们得到的是键值最小的那个对象....七、关闭和删除数据库 关闭数据库只需要在数据库对象db上调用close()方法即可 db.close(); 关闭数据库后,db对象仍然保存着该数据库的相关信息,只是无法再开启事务(调用开启事务方法会报错
JavaScript IndexedDB 完整指南 本文将通过一个小教程向你介绍 IndexedDB,并将 IndexedDB 与其他可用方式进行比较。...通常当服务器响应一个请求时,它们可能包含一个 SET-COOKIE 头,给浏览器一个要存储的键和值。然后,客户端应该在未来的请求头中包含这个 cookie,这将允许服务器识别浏览器会话等。...IndexedDB 是基于事件的,这符合它的异步模型。接下来,让我们看看数据库启动时可能发生的事件。首先,我们将监听request.onerror事件,以防访问数据库时出现任何错误。...: clear: 删除 store 中的所有记录 add:用给定的 id 插入一个记录(如果它已经存在就会出错) put:用给定的 id 插入或更新一个记录(如果已经存在就会更新) get:用特定的 id...在互联网连接中,你可能希望将 indexedDB 与外部数据库同步,以便在用户清除浏览器数据时不会丢失用户的信息。 4. 小结 IndexedDB 在浏览器中为你提供了一个功能强大的异步文档数据库。
现在,我们通过事务向数据库indexedDB-test的 对象存储空间movies中插入数据: varobjectStore=transaction.objectStore('movies');// 指定对象存储空间...,则会更新该条数据,否则插入新数据。...title属性值 primaryKey 数据库中这条对象的alt值 value 数据库中这条对象 direction openCursor()方法传入的第二个对象,默认值为next source IDBIndex...属性值 primaryKey 数据库中这条对象的alt值 direction openCursor()方法传入的第二个对象,默认值为next source altBIndex对象 和openCursor...,只是无法再开启事务(调用开启事务方法会报错,提示数据库连接已断开): 删除数据库则需要使用indexedDB.deleteDatabase(dbName)方法 window.indexedDB.deleteDatabase
不过,JavaScript修改location的除hash外的任意属性,页面都会以新URL重新加载。而唯一不引发刷新的hash参数并不会发送到服务器,因此服务器无法获得状态。...调用pushState()方法将新生成一条历史记录,方便用浏览器的“后退”和“前进”来导航(“后退”可是相当常用的按钮)。...history.replaceState() 它和history.pushState()方法基本相同,区别只有一点,history.replaceState()不会新生成历史记录,而是将当前历史记录替换掉...manifest列举的资源的过程中发生致命的错误在更新过程中manifest文件发生变化用户代理会尝试立即再次获取文件 属性:status 返回缓存的状态 可选值匹配常量描述0appCache.UNCACHED...指定的属性则不生成新的键值,如果没有自动生成递增键值,填充keyPath指定属性 ?
浏览器中结构化数据存储的一个代表的例子是 IndexedDB。 Key/Value: 键/值 数据存储和相关的 NoSQL 数据库提供了存储和检索由唯一键索引的非结构化数据的能力。...opt_errorCallback: 用于处理错误或获取文件系统的请求遭到拒绝时可选的回调,其参数为 FileError 对象。...result 属性尤其神奇,他可以根据“请求”生成的方式变成不同的东西,例如:IDBCursor 实例、刚插入数据库的数值对应的键值(key)等。...IndexedDB是面向对象的 — indexedDB 不是用二维表来表示集合的关系型数据库,这一点非常重要,将影响你设计和建立你的应用程序。...要存储应用程序状态和用户生成的内容,请使用IndexedDB。这使得用户可以在更多的浏览器中离线工作,而不仅仅是那些支持缓存API的浏览器。
与web开发中主要将数据保存在服务器端不同(cookie中仅保存极少量信息且会过期),数据持久化(Data Persistence)是本地应用开发中的常见需求,通俗的讲就是将瞬时数据(比如内存中的数据,...及其相关标准中提供的WebSQL、WebStorage、IndexedDB等方案,甚至直接将简单的数据保存到本地文件中 [I]....): 管理并顺序执行若干条SQL语句的容器,可以嵌套 错误回调:每条 SQL statement 及其所处的 transaction 都有各自的错误回调,用于精细或集约的捕获错误并引发回滚 回滚(roll...back):错误发生时撤销单条语句或整个事务的操作 可以在 DevTools->Application->Storage->Web SQL 标签页中查看已存储的数据 3.2 常用方法 openDatabase...} console.log(data); } ); }); //向一个假定并不存在的表里插入数据
ZangoDB是一个indexedDB的类MongoDB轻量级接口库,主要是为了更轻松快速的编写indexedDB相关的操作。...:Cursor db.collection('user').find().sort({createtime:1}); $unwind:将文档中的某一个数组类型字段拆分成多条,每条包含数组中的一个值。...$group:将集合中的文档分组,可用于统计结果。...$unwind: (解对象) 将文档中的某一个数组类型字段拆分成多条,每条包含数组中的一个值。...({title:/(教书|育人)/}) ZangoDB无法自动更新数据库结构的问题 ZangoDB can not update struct and indexes const DBName =
browser does NOT support localStorage'); } 常用API: 取记录: getItem; 设置记录: setIten; 移除记录: removeItem; 取 key所对应的值...4 (UPDATEREADY) : 更新完成,所有资源都已下载完毕 5 (IDLE) : 废弃,即应用缓存的描述文件已经不存在了,因此页面无法再访问应用缓存 相关事件: 表示应用缓存状态的改变。...如果manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用老的缓存 3....IndexedDB 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。...我们可以使用每条记录中的某个指定字段作为键值( keyPath ),也可以使用自动生成的递增数字作为键值( keyGenerator ),也可以不指定。
对用户端的开发者来说,本地无法复现的问题好比“断了线的风筝”,让人无计可施。...但 IndexedDB API 在使用上会遇到如下几个问题: (1)DB 版本升级问题 本地 DB 依靠版本的升级来更新库表结构,当本地该 DB 的版本升级后,尝试连接低版本 DB 的操作将失败。...当本地库表不存在时,DB Manager 会阻止对该 DB 的连接,直接返回空数据,避免了错误的库表结构污染本地 DB。...3.3 日志加密方案:混合加密 混合加密方式吸取了对称加密与非对称加密各自的优势: 对称加密:保证对长内容加密的效率。 非对称加密:保证对称密钥的安全性。...在存储每条具有私密性的日志前都会经历以下加密流程: 准备对称密钥与初始向量:随机产生 AES 对称密钥 AES Key 及初始向量 IV。
用户没有网络的时候,日志数据无法上传,为了防止日志丢失,会在用户端存一份离线日志数据,等待网络恢复的时候,重新上传。 第二,优化上报日志过多。...存取操作都是异步的,不会锁死浏览器,利于大数据读写,而 localstorage 则是同步的 3、同源策略。网页只能访问自身域名下的indexdb,无法跨域访问 4、存储空间大。...", "log_type", { unique: false } ); } 看下我们创建的索引 4、插入数据 插入数据,我们需要监听success 事件,在 连接数据库返回的实例中...3、上报请求错误了,存本地 其中怎么判断用户离线呢? 通过 window.navigator.onLine ,这个属性值为true表示设备在线,为false表示设备离线。...但是设备在线,并不包括网络差的情况,为了不再网络差的时候占用用户网速,我们会加多一个另外的判断。 如果 15s 内上报错误大于3,那么数据会存在本地,会设置一个15s 定时器去重置错误次数。
领取专属 10元无门槛券
手把手带您无忧上云