IndexedDB 是什么 在现代浏览器的本地存储方案中，indexedDB 是一项重要的能力组成， 它是可以在浏览器端使用的本地数据库，可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案...在同源策略（ 协议 + 域名 + 端口 ）的前提下，每个域名下可以新建任意多的数据库。IndexedDB 中有版本概念，这就规定了同一时刻下只有一个版本的数据库存在。...索引：为不同的属性建立索引可以加快数据的检索。 事务：数据的 CURD (增删查改) 都要通过事务来完成。 通过简单的对比图来理解 IndexedDB 的概念： ?...值得注意的是虽然创建了四个字段，但在 IndexedDb 中数据还是分为主键 id 和数据主体两个部分，并不会像 MYSQL 中在 Table 中呈现四列。...可以提效的类库 从上面的例子中可以看出，每一次操作需要至少三行代码才能完成，而且需要一直维护 DB 的对象引用，避免它被回收，这样子开发代码膨胀得太厉害，所以我们在业务中引入其他类库来减少代码量 LocalForage
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。...如果资源文件有修改，则更新文件内容，同时修改资源文件名，如 common.v2.js，html页面也会引用新的资源文件名。...在 Chrome 的开发者工具中，能查看创建的 DB 、存储对象(可理解成表）以及表中添加的数据。 ? IndexedDB 有个非常强大的功能，就是 index（索引）。...它可对 Value 对象中任何属性生成索引，然后可以基于索引进行 Value 对象的快速查询。 要生成索引或支持索引查询数据，需求在首次生成存储对象时，调用接口生成属性的索引。...可以对对象任何属性生成索引，方便查询。 较大的存储空间，默认推荐250MB(分 HOST)，比 Dom Storage 的5MB 要大的多。
，关系型数据库如Mysql、Oracle等将数据存储在表中，而非关系型数据库如Redis、MongoDB等将数据集作为个体对象存储。...而IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。...我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。...objectStore = db.createObjectStore(\'person\', { keyPath: "id", autoIncrement: true }); //指定可以被索引的字段...，使用object store的createIndex创建索引，方法有三个参数：索引名称、索引属性字段名、索引属性值是否唯一。
Expires 是 HTTP1.0 标准中的字段，Cache-Control 是 HTTP1.1 标准中新加的字段，功能一样，都是控制缓存的有效时间。...如果资源文件有修改，则更新文件内容，同时修改资源文件名，如 common.v2.js，html页面也会引用新的资源文件名。...HTML 文档中，引用外部一个 JS 文件和一个 GIF 图片文件，在其 HTML 头中通过 manifest 属性引用了一个 appcache 结尾的文件。...引用 manifest 文件的 HTML 和 manifest 文件中列出的要缓存的文件最终都会被浏览器缓存。...可以对对象任何属性生成索引，方便查询。 较大的存储空间，默认推荐250MB(分 HOST)，比 Dom Storage 的5MB 要大的多。
IndexedDB 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。 首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。...幸运的是，有几种关于如何在浏览器中存储数据的工具，可以在线和离线访问数据。 1....浏览器存储方式 关于如何在浏览器中存储数据，Web 标准提供了三个主要 API： Cookies：此数据存储在浏览器中，Cookies 的大小限制为 4k。...如果不打算按特定属性进行搜索，则不必创建索引。 最后要处理 request.onsuccess 事件，该事件在数据库连接和存储全部设置和配置之后运行。...** 错误提示：** 如果你正在运行一个热重新加载 web 服务器，如 liveserver，你可能会看到一个错误，没有存储。这是因为 onupgradedneeded 函数在你写完函数之前就执行了。
造成加载慢的原因，主要是三维应用涉及到的资源文件会特别多，这些资源文件主要是模型及其图片，往往这些模型和图片都会比较大。 为了加快三维场景的加快速度，可以使用IndexedDB在客户端进行资源缓存。...意味着扩展或收缩字段一般无须修改数据库和表结构（除非新增字段用做索引） 键值对存储。意味着存取无须字符串转换过程 存储类型丰富。...意味着浏览器缓存中不再是只能存字符串了 异步： 意味着所有操作都要在回调中进行 本地浏览器拥有三种永久存储数据技术，分别为Web Storage、IndexedDB、Web SQL。...IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。在HTML5本地存储中，IndexedDB存储的数据则是最多的。 查询高效。...IndexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。 异步操作。
在你准备用原生indexedDB之前，不妨先看看如下这些问题： 原生所有操作都是在回调中进行的 原生所有操作都需要不断地创建事务，判断表和索引的存在性 原生为表建立索引很繁琐 原生查询支持的较为简单，复杂的查询需要自己去实现...原生不支持批量操作 原生的错误需要在每个失败回调中接收处理 ......简化数据查询 Dexie.js支持复杂的查询操作，包括过滤、排序、范围查询等，完全不需要编写那些的低级 IndexedDB 代码。还有更丰富的索引定义，并且支持多值索引和复合索引。...：++，说明是自增的主键；&，说明是唯一索引；，说明该字段是多值索引。...此外，我们可以用where() 子句运算符查询多条目索引对象，如： const friends = useLiveQuery( () => db.friends .where('
IndexedDB 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。 首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。...幸运的是，有几种关于如何在浏览器中存储数据的工具，可以在线和离线访问数据。 1....浏览器存储方式 关于如何在浏览器中存储数据，Web 标准提供了三个主要 API： Cookies：此数据存储在浏览器中，Cookies 的大小限制为 4k。...❝「错误提示：」如果你正在运行一个热重新加载 web 服务器，如 liveserver，你可能会看到一个错误，没有存储。这是因为 onupgradedneeded 函数在你写完函数之前就执行了。...在互联网连接中，你可能希望将 indexedDB 与外部数据库同步，以便在用户清除浏览器数据时不会丢失用户的信息。 4. 小结 IndexedDB 在浏览器中为你提供了一个功能强大的异步文档数据库。
试想一下，如何在数据库中不保持用户状态也可以登录。 第一种方法： 前端直接传 user_id 给服务端 缺点也特别特别明显，容易被用户篡改成任务 user_id，权限设置形同虚设。...如何允许用户只能在一个设备登录，如微信 session: 使用 sql 类数据库，对用户数据库表添加 token 字段并加索引，每次登陆重置 token 字段，每次请求需要权限接口时，根据 token...查找 user_id jwt: 假使使用 sql 类数据库，对用户数据库表添加 token 字段(不需要添加索引)，每次登陆重置 token 字段，每次请求需要权限接口时，根据 jwt 获取 user_id...如何允许用户只能在最近五个设备登录，如诸多播放器 session: 使用 sql 类数据库，创建 token 数据库表，有 id, token, user_id 三个字段，user 与 token 表为...jwt: 使用计数器，使用 sql 类数据库，在用户表中添加字段 count，默认值为 0，每次登录 count 字段自增1，每次登录创建的 jwt 的 Payload 中携带数据 current_count
若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件，不会触发upgradeneeded事件. db是对该数据库的引用....三、创建对象存储空间和索引 在关系型数据库(如mysql)中，一个数据库中会有多张表，每张表有各自的主键、索引等; 在key-value型数据库(如indexedDB)中, 一个数据库会有多个对象存储空间...向数据库中增加数据，add()方法增加的对象，若是数据库中已存在相同的主键，或者唯一性索引的键值重复，则该条数据不会插入进去; 增加数据还有一个方法: put(), 使用方法和add()不同之处在于，数据库中若存在相同主键或者唯一性索引重复...从数据库中删除数据 删除数据使用delete方法，同上类似: 从数据中获取数据 获取数据使用get方法，同上类似： 五、使用索引 在前面，我们创建了两个索引alt和title, 配置对象里面的unique...在indexedDB2规范中，在对象存储空间对象上纳入了一个getAll()方法，可以获取所有对象: 在索引上使用游标 接着本文上述使用索引的例子，在索引title上使用openCursor()方法时
试想一下，如何在数据库中不保持用户状态也可以登录。 第一种方法：前端直接传 user_id 给服务端 缺点也特别特别明显，容易被用户篡改成任意 user_id，权限设置形同虚设。...如何允许用户只能在一个设备登录，如微信 session: 使用 sql 类数据库，对用户数据库表添加 token 字段并加索引，每次登陆重置 token 字段，每次请求需要权限接口时，根据 token...查找 user_id jwt: 假使使用 sql 类数据库，对用户数据库表添加 token 字段(不需要添加索引)，每次登陆重置 token 字段，每次请求需要权限接口时，根据 jwt 获取 user_id...如何允许用户只能在最近五个设备登录，如诸多播放器 session: 使用 sql 类数据库，创建 token 数据库表，有 id, token, user_id 三个字段，user 与 token 表为...jwt: 使用计数器，使用 sql 类数据库，在用户表中添加字段 count，默认值为 0，每次登录 count 字段自增 1，每次登录创建的 jwt 的 Payload 中携带数据 current_count
IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。...IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。...{ id: 1, text: 'foo' } 上面的对象中，id属性可以当作主键。 数据体可以是任意数据类型，不限于对象。 （4）索引 为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。...索引的意义在于，可以让你搜索任意字段，也就是说从任意字段拿到数据记录。...如果不建立索引，默认只能搜索主键（即从主键取值）。 假定新建表格的时候，对name字段建立了索引。
若是已存在名为DB_NAME的数据库, 则上述代码会打开该数据库; 只触发success/error事件，不会触发upgradeneeded事件. db是对该数据库的引用....三、创建对象存储空间和索引 在关系型数据库(如mysql)中，一个数据库中会有多张表，每张表有各自的主键、索引等; 在key-value型数据库(如indexedDB)中, 一个数据库会有多个对象存储空间...向数据库中增加数据，add()方法增加的对象，若是数据库中已存在相同的主键，或者唯一性索引的键值重复，则该条数据不会插入进去; 增加数据还有一个方法: put(), 使用方法和add()不同之处在于，数据库中若存在相同主键或者唯一性索引重复...在索引上使用游标 接着本文上述使用索引的例子，在索引title上使用openCursor()方法时，若不传参数，则会遍历所有数据，在成功回调中的到的result对象有以下属性： key 数据库中这条对象的...如果你想要在游标在索引迭代过程中过滤出重复的，你可以传递 nextunique(或prevunique, 如果你正在向后寻找)作为方向参数。
Encryption：通过将模式字段设置为encrypted，该字段的值将以加密模式存储，没有密码就无法读取。...Dexie.js 主要为了解决原生 IndexedDB API 中存在的三个主要问题： 异常错误处理。 较弱的查询功能。 代码复杂性。...通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。...该 API 使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太好用。IndexedDB 提供了一个解决方案。...，不能跨域名访问； 支持事务型：IndexedDB 执行的操作会按照事务来分组的，在一个事务中，要么所有的操作都成功，要么所有的操作都失败； 键值对存储：IndexedDB 内部采用对象仓库（object
由于存在这么多缺点，因此我们需要解决以下问题： 解决 4k 的大小问题； 解决请求头常带存储信息的问题； 解决关系型存储的问题； 跨浏览器； 三、五种存储方式 1....引用manifest的html必须与manifest文件同源，在同一个域下 4....IndexedDB 索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。...(name); } 数据存储： indexedDB 中没有表的概念，而是 objectStore ，一个数据库中可以包含多个 objectStore， objectStore是一个灵活的数据结构，可以存放多种类型数据...我们可以使用每条记录中的某个指定字段作为键值（ keyPath ），也可以使用自动生成的递增数字作为键值（ keyGenerator ），也可以不指定。
IndexedDB 很适合存储大量数据，它的 API 是异步调用的。IndexedDB 使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。...indexedDB 的特性 对象仓库 有了数据库后我们自然希望创建一个表用来存储数据，但 indexedDB 中没有表的概念，而是 objectStore，一个数据库中可以包含多个 objectStore...我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。...db.createObjectStore(personStore, { keyPath: 'id', autoIncrement: true }); //指定可以被索引的字段...，unique字段是否唯一, 指定索引可以加快搜索效率。
，不做太深入的讨论 需要了解四个基本概念，以关系型数据库为例 数据库 Database 数据表 Table（IndexedDB 中叫 ObjectStore） 字段 Field 事务 Transaction...，或者删除 id 这种每条数据唯一的值，就可以被用来做主键（primary key），主键在表内独一无二，无法添加相同主键的数据 而主键一般会被建立索引，所谓对字段建立索引，就是可以根据这个字段的值，在表里非常快速的找到对应的数据...（通常不高于 O(logN)），如果没有索引，那可能就需要遍历整个表（O(N)） 增、删、改、查这些操作，都需要通过事务 Transaction 来完成 如果事务中任何一个操作没有成功，整个事务都会回滚...这里可以看到 IndexedDB 的 key-value 储存特性，key 就是主键（这里指定主键为 id），value 就是剩下的字段和对应的数据 这个 key-value 结构对应的 Table 结构如下...： https://godb-js.github.io/ 总之，GoDB 可以 帮你在背后处理好 IndexedDB 各种繁琐操作 帮你在背后维护好数据库、数据表和字段 以及字段的索引，各种属性（比如
,索引结构都要确定。...NoSQL数据库通常只需要建立数据库的名称，表名称以及需要索引的字段。 其他的数据可以任意存储。...createtime:true }, article:{ type:true }, log:true }; // 数据库结构只需要保留 表名称(user,article等) 而后续的只需要保留需要索引的字段名称...:Cursor db.collection('user').find().sort({createtime:1}); $unwind：将文档中的某一个数组类型字段拆分成多条，每条包含数组中的一个值。...$unwind： (解对象) 将文档中的某一个数组类型字段拆分成多条，每条包含数组中的一个值。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
