如果传入的数据库版本比浏览器实际最新的版本低，则会抛出一个错误。 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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
