IndexedDB 参考链接：阮一峰 网道API MDN 基本概念 IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。...IDBDatabase.onversionchange：数据库版本变化时触发（发生upgradeneeded事件，或调用indexedDB.deleteDatabase()）。...IDBKeyRange 可以只包含一个值，也可以指定上限和下限。它有四个静态方法，用来指定主键的范围。 IDBKeyRange.lowerBound()：指定下限。...新建时必须指定表格名称和操作模式（“只读”或“读写”）。...写入操作是一个异步操作，通过监听连接对象的success事件和error事件，了解是否写入成功。
IndexedDB 教程 IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了 LocalStorage 和 Cookies，为什么还要推出 indexedDB 呢？...其实对于在浏览器里存储数据，可以使用 cookies 或 LocalStorage，但它们都是比较简单的技术，而 IndexedDB 提供了类似数据库风格的数据存储和使用方式。...也就是说一个 objectStore 相当于一张表，里面存储的每条数据和一个键相关联。...IndexedDB API 天生是基于请求的,这也是 API 异步本性指示。对于你在数据库执行的每次操作,你必须首先为这个操作创建一个请求。当请求完成,你可以响应由请求结果产生的事件和错误。...返回值是一个：IDBRequest实例,此实例有onerror和onsuccess事件。
而 Web SQL Database 和 IndexedDB(索引数据库)是对这个概念的实现。 其中 Web SQL Database 在目前来说基本已经被放弃。...和大多数 web 存储解决方案相同，IndexedDB 也遵从同源协议(same-origin policy)， 所以你只能访问同域中存储的数据，而不能访问其他域的。...IndexedDB 是 WebSQL 数据库的取代品。 IndexedDB 和 WebSQL 的不同点在于: WebSQL 是关系型数据库而 IndexedDB 是 key-value 型数据库。...它类似于关系型数据库的表格。 数据记录 对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。...创建一个对象仓库 有了刚刚创建的数据库之后，我们可能就想要去存储数据了，但是只有数据库还不够，我们还需要有对象仓库(object store)，对象仓库是 IndexedDB 数据库的基础，其类似于关系型数据库中表的概念
有了IndexedDB，浏览器可以存储更多的数据，从而丰富了浏览器端的应用类型。 IndexedDB简介 IndexedDB和传统的关系型数据不同的是，它是一个key-value型的数据库。...IndexedDB是一种 NoSQL 数据库，和关系型数据库不同的是，IndexedDB是面向对象的，它存储的是Javascript对象。...，IDBTransaction和IDBKeyRange三个对象。...console.error("Database error: " + event.target.errorCode); }; IndexedDB中的table叫做object stores，和关系型数据库中的...table一样，object stores中的每一个对象都和一个key相关联，和key相关的有两个概念 key path 和 key generator.
本地存储，在浏览器中包括了 Cookies、Local Storage、Session Storage、WebSQL 和 IndexedDB 这 5 种形式的本地存储，它们之间的区别: Cookies...Cookies 是最早的本地存储，是浏览器提供的功能，并且对服务器和 JS 开放，这意味着我们可以通过服务器端和客户端保存 Cookies。...WebSQL 与 IndexedDB WebSQL 与 IndexedDB 都是最新的 HTML5 本地缓存技术，相比于 Local Storage 和 Session Storage 来说，存储功能更强大...而这些浏览器客户端，比如 Chrome 和 Safari 会用 SQLite 实现本地存储，微信就采用了 SQLite 作为本地聊天记录的存储。...如果说 WebSQL 方便我们对 RDBMS 进行操作，那么 IndexedDB 则是一种 NoSQL 方式。
来源：党黎明 mr-dang.github.io/javascript/2017/12/09/indexedDB基本使用.html indexedDB 简介: indexedDB 是一种使用浏览器存储大量数据的方法...indexedDB 有以下特点: indexedDB 是 WebSQL 数据库的取代品 indexedDB遵循同源协议(只能访问同域中存储的数据，而不能访问其他域的) API包含异步API和同步API两种...三、创建对象存储空间和索引 在关系型数据库(如mysql)中，一个数据库中会有多张表，每张表有各自的主键、索引等; 在key-value型数据库(如indexedDB)中, 一个数据库会有多个对象存储空间...(dbName)方法 window.indexedDB.deleteDatabase(dbName); 八、indexedDB的局限性 以下情况不适合使用IndexedDB 全球多种语言混合存储。...: openCursor(keyRange, direction) 参考 IndexedDB的基本概念-MDN 使用 IndexedDB-MDN IndexedDB API接口-MDN Indexed
indexedDB介绍 原生介绍 indexedDB 是一个前端数据持久化解决方案（即前端缓存），由浏览器实现。 0. 兼容性 1.特点 基于文件存储。...意味着其容量可达到硬盘可用空间上限 非关系型数据库。意味着扩展或收缩字段一般无须修改数据库和表结构（除非新增字段用做索引） 键值对存储。意味着存取无须字符串转换过程 存储类型丰富。...创建一个数据库 window.indexedDB.open(dbName, version) 示例： const dbRequest = window.indexedDB.open('demo', 1...库版本 一个数据库同一时间只能存在一个最新的版本（该版本记录了当前使用的数据库和表结构） 只有在修改数据库结构和表结构时，版本才需要升级 修改数据库结构和表结构或升级数据库版本对数据库内的数据一般没有影响...事务 所有记录的增删改查都要在事务中进行 之所以引入事务，是为了保证操作顺序和可靠性 顺序：事物中所有的操作必须排队进行 可靠性： 在【同一个事务】中，对于【同一张表】的一组操作有一个失败，之前的都回滚
key/value的存储方式：IndexedDB和localStorage的存储方式很类似，都是通过一个key对应一个value，而且key是唯一的方式进行存储的，但是indexedDB和localStorage...支持事务：IndexedDB支持事务，如果有用过mysql和mongoDB的人就很清楚了，能确保我们多个操作只要其中一步出现问题，可以整体回滚。...同源限制：IndexedDB和localStorage一样，都是有同源策略的问题，不能跨协议、端口、域名使用。...在这里不就重复去说明了，如果你有用过mongoDB的话，那么也很好理解IndexedDB的原理和使用。...但是因为使用indexedDB和使用localStorage是完全不一样的，基本上都是异步操作而且还要考虑一些低版本的手机可能不支持的情况，所以要封装中间件，同样的调用，根据设备对indexedDB的兼容情况
PWA 系列（三）——IndexedDB IDB 操作的基本步骤是 open 方法打开数据库 ? 然后是创建数据库 store 对象仓库 ?...打开数据库 window.indexedDB 是一个 IDBFactory 对象，调用对象 open 方法返回的是一个 IDBOpenDBRequest 请求，监听 success 事件，e.target.result...存储空间有以下方法和属性： ?...另外还有在索引上调用的两种游标使用方法，见 MDN 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB...#%E4%BD%BF%E7%94%A8%E7%B4%A2%E5%BC%95 事务和请求之间的关系 最后来聊一聊 IDB 数据库的事务和请求之间的关系： 首先，请求就是所有针对 IDB 的异步操作都会返回请求
数据在 web 应用程序中无处不在 —— 用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法，就不可能允许用户交互跨多个 web 应用程序的使用保持状态。...幸运的是，有几种关于如何在浏览器中存储数据的工具，可以在线和离线访问数据。 1....IndexedDB：一个内置在浏览器中的完整文档数据库，没有存储限制，它允许你异步访问数据，这对于防止复杂操作阻塞呈现和其他活动非常有效。这就是我们将在下面深入讨论的内容。...最后要处理 request.onsuccess 事件，该事件在数据库连接和存储全部设置和配置之后运行。你可以利用这个机会提取 todo 列表并将它们注入到我们的数组中。...性能和其他考虑因素 你需要考虑以下几点： 并不是所有浏览器都支持将文件存储为 blob，你会发现更好的方式：将它们存储为 arraybuffer。
数据在 web 应用程序中无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法，就不可能允许用户交互跨多个 web 应用程序的使用保持状态。...幸运的是，有几种关于如何在浏览器中存储数据的工具，可以在线和离线访问数据。 1....IndexedDB：一个内置在浏览器中的完整文档数据库，没有存储限制，它允许你异步访问数据，这对于防止复杂操作阻塞呈现和其他活动非常有效。这就是我们将在下面深入讨论的内容。...最后要处理 request.onsuccess 事件，该事件在数据库连接和存储全部设置和配置之后运行。你可以利用这个机会提取 todo 列表并将它们注入到我们的数组中。...性能和其他考虑因素 你需要考虑以下几点： 并不是所有浏览器都支持将文件存储为 blob，你会发现更好的方式：将它们存储为 arraybuffer。
我们先来通过表格学习下这几种存储方式的区别 特性 Cookie localStorage sessionStorage indexedDB 数据声明周期 一般由服务器生成，可以设置过期时间 除非被清理，...删除某一键名对应的数据： removeItem() localStorage.removeItem('user_name') 清空数据记录：clear() localStorage.clear() #indexedDB...IndexedDB 是一个运行在浏览器上的非关系型数据库。...理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。...这组文档和指南告诉您有关 PWA 的所有信息。 其实我的理解，就是在浏览器或者其他客户端应用缓存一个webapp，一次使用，就将代码都缓存到本地，再次打开无需重复加载。
ZangoDB是一个indexedDB的类MongoDB轻量级接口库，主要是为了更轻松快速的编写indexedDB相关的操作。...这里我将会对熟悉关系型数据库的来做一下说明。...ZangoDB主要将indexedDB简化为3个对象 Db - 数据库 Collection - 集合(表) Cursor - 游标 查询( SQL ) 不同于关系型数据库的初始化时数据库,表,所有字段名称和类型...数据库 Db 打开和初始化数据库 :Db 在indexedDB环境下，通常数据库的结构是直接写在打开数据库的部分。...Operators 操作符 由于ZangoDB是一个模拟MongoDB的接口实现，所以其提供的操作符是和MangoDB类似的。
一、AI 解读 关联关系、依赖关系、实现关系和泛化关系是面向对象设计中的四种基本关系。它们在类与类之间建立不同类型的联系，以反映对象间的相互作用、依赖和继承关系。...泛化关系（Generalization） 是一种继承关系，表示一般与特殊的关系，即子类是父类的一个特殊化。 在泛化关系中，子类继承了父类的所有特性和行为，并可以添加新的特性和行为或重写父类的方法。...动物类可以被泛化为哺乳动物类和鸟类，哺乳动物类和鸟类是动物类的特殊化。 这四种关系是面向对象设计中非常重要的概念，它们帮助设计者构建系统的结构，明确类与类之间的关系，以及它们如何相互作用。...选项C和D错误地描述了依赖和关联关系。 题目3 如果一个类实现了一个接口，这种关系被称为什么？ A. 泛化关系 B. 依赖关系 C. 实现关系 D....它表示一种继承关系，子类继承父类的特性和行为 答案： D 解析： 泛化关系是一种继承关系，其中子类继承父类的属性和方法，并且可以添加新的属性和方法或者覆盖父类的方法。
概述 本文通过对IndexedDB的使用方法和使用场景进行相关介绍，对常见的问题进行解答。 同时，因为MDN中的相关文档缺乏相关逻辑性，所以不容易理解。...本文将通过项目中常见的数据存储和操作需求来进行内容组织。 读者能够通过本文学会在项目中正确的使用IndexedDB，给应用带来的本地存储能力，并且避免一些常见的问题。...在浏览器提供的数据库中，共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说，更推荐大家使用IndexedDB。...openCursor和openKeyCursor有两个参数： 第一个参数，遍历范围，指定游标的访问范围。该范围通过一个IDBKeyRange参数的方法来获取。...总结 IndexedDB在本地存储中有着无可替代的作用，是替代关系型数据库web sql的产品，能够对大量数据进行存储。在许多需要运用离线存储的场景下，它能够给我们提供有效的支撑。
---- theme: fancy 说起 Web 缓存，我们自然就会想到 Cookie，LocalStorage 和 SessionStorage，却很少提及 IndexedDB。...IndexedDB 能够解决什么 那么，IndexedDB 具体能够帮助到我们什么呢？...上面也已经提及了，IndexedDB 存储数据特点： 键值对存储 存储的数据，除了可以存储字符串数据，还可以: 支持二进制的存储。ArrayBuffer 对象和 Blob 对象。...vue 和 react 同理。如果想通过纯 JavaScript 演示，推荐阅读HTMl5 indexedDB存储编辑和删除数据实例页面。...参考文章 浏览器数据库 IndexedDB 入门教程 Web Storage API IndexedDB API HTML5 indexedDB前端本地存储数据库实例教程 IndexedDB使用（基本函数封到
用例 “注册学生信息”和“充值”与用例“用户登录”之间的关系就是包含关系。b和a本质不一样，就是做b之前一定要做a，那a和b就是包含。 如图 扩展用例 只有在基本用例满足某种条件的时候才会执行。...包含关系中基本用例的基本流执行时，包含用例一定会执行。b和a本质是一样东西，但是b比a大。...用例“会员注册”和“电话注册”、“邮件注册”之间是泛化关系。本质都是一样的，都是注册，而且一样大。 UML类关系 类 在UML中，我们用分成三栏的长方形表示。...依赖 凡是动物，生存都需要水和空气，这种必须的需求，我们称之为依赖关系。用虚线一端带箭头表示，箭头指向依赖物。 聚合、组合 这两个关系我们放在一起，因为她们看似十分的相似，但是却有着本质的区别。...很多大雁聚合在一起变成雁群，也可以说雁群里有雁，所以是整体和个体之间的关系,即has-a的关系，此时整体与部分之间是可分离的，他们可以具有各自的生命周期。即雁群可以不存在了，但是孤雁仍然存在。
有了 LocalStorage 和Cookies，为什么还要推出 indexedDB 呢？...其实对于在浏览器里存储数据，可以使用 cookies 或LocalStorage，但它们都是比较简单的技术，而 IndexedDB 提供了类似数据库风格的数据存储和使用方式。...与LocalStorage的场景和区别 LocalStorage 是用 key-value 键值模式存储数据，它存储的数据都是字符串形式。...IndexedDB 很适合存储大量数据，它的 API 是异步调用的。IndexedDB 使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。...IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。
gateway呢 首先这两种网关的定义不一样 用户访问的总入口，也就是前端页面的容器，流量网关 gateway的定义是针对每一个业务微服务来得，属于业务网关 借鉴一个图 对于具体的后端业务应用或者是服务和业务有一定关联性的策略网关就是上图左边的架构模型...有时候我们也会模糊流量网关和业务网关，让一个网关承担所有的工作,所以这两者之间并没有严格的界线。
就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 具有以下特点。 （1）键值对储存。 ...IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。 二、基本概念 IndexedDB 是一个比较复杂的 API，涉及不少概念。...它类似于关系型数据库的表格。 （3）数据记录 对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。...（5）事务 数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。...新建时必须指定表格名称和操作模式（”只读”或”读写”）。
云服务器
ICP备案
实时音视频
对象存储
云直播
