IndexedDB 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。 首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。...IndexedDB：一个内置在浏览器中的完整文档数据库，没有存储限制，它允许你异步访问数据，这对于防止复杂操作阻塞呈现和其他活动非常有效。这就是我们将在下面深入讨论的内容。...所以，让我们用 IndexedDB 构建一些东西，让你更好地感受它是如何工作的！ 2. 使用案例 创建一个新的 HTML 文件，我们称之为 index.html，内容如下： <!...null } 这个函数要么返回 IndexedDB 的浏览器实现，要么返回浏览器不支持的日志。...如果用户关闭浏览器，则任何未完成的事务都有可能被中止。 如果另一个浏览器选项卡打开了一个更新的数据库版本号的应用程序，它将被阻止升级，直到所有旧版本选项卡关闭 / 重新加载。
引言 2021 年，如果你的前端应用，需要在浏览器上保存数据，有三个主流方案： Cookie Web Storage (LocalStorage) IndexedDB 这些方案就是如今应用最广、浏览器兼容性最高的三种前端储存方案...当用户处于 abc.com 时，浏览器会向 taobao.com/some-ads 发起一个 HTTP 请求 当淘宝服务器返回广告内容时，会顺带一个 Set-Cookie 的 HTTP 请求头，告诉浏览器设置一个源为...允许不遵守格式） 数据库也给我们提供了方法，当我们知道一个学生的学号（id），就可以在非常短的时间内，在表里成千上万个学生中，快速找到这个学生，并返回他的完整信息 也可以根据 id 定位，对该学生的数据进行修改...，我认为在前端越来越复杂的未来，在下一个十年各种重前端应用（在线文档，各种 SaaS 应用），以及 Electron 环境中，IndexedDB 一定能够大放光彩 比如缓存接口数据，实现更好的用户体验...比如在线文档（富文本编辑器）保存编辑历史 比如任何需要在前端保存大量数据的应用 总之，IndexedDB 可以说是最适合用来在前端存数据的方案，只不过因为其繁琐的操作和一定的使用门槛，在目前没有更简单的
，例如视频会议、直播 适用于要求可靠传输的应用，例如文件传输 CSS中可继承与不可继承属性有哪些一、无继承性的属性display：规定元素应该生成的框的类型文本属性：vertical-align...cursor：光标显示为何种形态单行、多行文本溢出隐藏单行文本溢出overflow: hidden; // 溢出隐藏text-overflow: ellipsis; //...函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。...内核是基于标记语言显示内容的程序或模块。...由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。
大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。 全文阅读大概需要8分钟，建议先收藏后看。...二、不依赖后端，图片一次性回显 不依赖后端就是图片上传后，图片的预览不使用后端返回的图片地址，而是前端通过上传的图片自己显示。...localForage通过使用简单的类似于localStorage的API使用异步存储（IndexedDB或WebSQL）来改善Web应用程序的离线体验。...它使应用程序可以在脱机时在本地存储数据，然后在应用程序重新联机时将其与CouchDB和兼容服务器同步，从而使用户的数据无论在下次登录时都保持同步。...Github地址：https://github.com/jakearchibald/idb （完） ---- 想看更多精彩内容，关注我获取更多前端技术与个人成长相关内容，我相信有趣的人终会相遇！
在发布环境因慎重使用，因为并是所有的浏览器都支持，实现方式可能存在很大的不兼容性，并且在将来可能也会发生变化。...IndexedDB 是事务模式的数据库 — 任何操作都发生在事务(transaction)中。...The IndexedDB API 基本上是异步的 — IndexedDB 的 API 不通过 return 语句返回数据，而是需要你提供一个回调函数来接受数据。...任何支持创建离线应用程序所需的 Service Worker technology 的浏览器都可以使用这个 API，Cache API 非常适合存储与已知 URL 关联的资源。...要存储应用程序状态和用户生成的内容，请使用IndexedDB。这使得用户可以在更多的浏览器中离线工作，而不仅仅是那些支持缓存API的浏览器。
用Ajax实现翻页等内容切换是有原因的。...如何应用 HTML5 history API的内容不多，具体如何应用它来改进Ajax翻页呢？ 首先，在服务器端添加对URL状态参数的支持，例如?page=3将会输出对应页码的内容（后端模板）。...appcache/:49 updateready /html5/appcache/:67 2.对于另一个没有引用manifest文件的html，当它加载时，不会触发applicationCache的任何事件...异步 在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求—响应的模式，所谓异步API是指并不是这条指令执行完毕，我们就可以使用request.result来获取indexedDB...在操作结果上进行一些操作（可以在 request 对象中找到） 接下来如果想要理解indexedDB具体怎么玩，最好的方法就是创建一个简单的web应用：把人的姓名、电话、地址存储在IndexedDB里。
每个Web应用体验都必须快速，对于渐进式 Web 应用更是如此。快速是指在屏幕上获取有意义内容所需的时间，要在不到 5 秒的时间内提供交互式体验。并且，它必须真的很快。很难形容可靠的高性能有多重要。...ETag 由服务端根据资源内容生成一段 hash 字符串，标识资源的状态,用户第一次请求时服务器会将ETag随着资源一起返回给浏览器, 再次请求时浏览器会将这串字符串传回服务器，验证资源是否已经修改，如果没有修改直接使用缓存...如果没有修改，则返回 304，使用缓存；如果修改过，则再次去服务器请求资源，返回200，重新请求资源。 3. Expires 缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。...通过这种方式我们对原来的请求方式可以不做任何改变, 完全采用代理机制在请求拦截器中和响应拦截器中布局我们的代理即可,关键点就是存到数据库中的内容要和服务器响应的内容结构一致....这样,我们再次进行某项数据的搜索时,可以不走任何http请求,直接从indexedDB中获取,这样可以为公司节省大量的流量.
如果光标现在位于第一行上，则返回true，如果ResultSet对象不包含任何行，则返回false。 last:: 将光标移动到ResultSet对象中的最后一行。...如果光标现在位于最后一行上，则返回true，如果ResultSet对象不包含任何行，则返回false。 beforeFirst: 将光标定位在ResultSet对象的开头，即第一行之前。...如果ResultSet对象不包含任何行，则此方法不起作用。 relative(int rows): 相对于当前位置移动光标。...变量jrs在添加RowSet对象之前不包含任何内容。 添加 RowSet 对象 任何RowSet对象都可以添加到JoinRowSet对象中，只要它可以成为 SQL JOIN的一部分。...以下示例 XML 文档使用间距和缩进使其更易于阅读，但在实际的 XML 文档中不使用这些，其中间距不表示任何内容。
no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age等等 各个消息中的指令含义如下： Public指示响应可被任何缓存区缓存...若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。...对于数据量较大的数据缓存，我们应该应用本地数据库实现（indexDB） indexDB IndexedDB 具有以下特点: （1）键值对储存。...IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。...在服务器添加Server头，有利于排查错误 应用缓存思路 分为手机APP和Client以及是否遵循http协议,在没有联网的状态下可以展示数据,流量消耗过多 漂亮的加载过程 提前下发避免秒杀时同时下发数据造成流量短时间暴增
这意味着，localStorage 执行的任何操作都可能会阻塞主线程，降低应用程序性能和响应速度，影响用户体验。 受限的数据结构：与更高级的数据库不同，localStorage 仅限于简单的键值存储。...这个 API 提供对基于源的沙盒文件系统的直接访问，该文件系统针对性能高度优化，并提供对其内容的就地写入访问。 OPFS 提供了令人印象深刻的性能优势。...因此，不建议在当代 Web 应用中使用 Cookie 存储数据。...此外，WebSQL 的速度通常比 IndexedDB 慢 10 倍左右，这使得它对于需要高效数据检索的应用而言不是最佳选择。...与 localStorage 相比，这个 API 的异步执行，且所有操作都会返回 Promise。
目录 表单指令 条件指令 循环指令 循环指令案例 分隔符 过滤器 计算属性 监听属性 冒泡排序 JS代码中的光标设置 表单指令 v-model="变量"，变量值与表单的value相关，placeholder...过滤器：传入要过滤的条件，返回值就是过滤的结果 1.在filters成员中定义过滤器方法 2.可以对多个值进行过滤，过滤时还可以额外传入辅助参数 3.过滤的结果可以再进行下一次过滤（过滤的串联） {{...才会启用绑定的方法，方法属性的值就是绑定方法的返回值 3.绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性的值 4.一般用来实现的功能：一个变量值依赖于多个变量的变化而变化如下面的例子...监听属性的特点 1.监听的属性需要在data中声明，监听方法不需要返回值 2.监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法 3.监听方法有两个回调参数：当前值，上一次值 应用场景...all-scroll有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 move十字箭头光标。用于标示对象可被移动。 help带有问号标记的箭头。
笔者将在下面的内容中对每一种前端缓存进行简单的分析，并且给出建议使用的场景。...2.1.1 H5离线缓存(manifest) 在说H5离线缓存之前，不得不说一点：H5离线缓存目前已经处于被废弃的状态(不推荐使用)。...比如开发这可以使用自定义的body和header组成一个http回包作为请求的返回提供给浏览器。具备更加精确的控制能力。...，索引，主键等，这些都是很好的一些特性 3 支持二进制存储 和Cookie，localStorage等不同的是，indexedDB几乎支持任何类型的数据存储，包括文本数据，二进制数据，js对象等，对于需要直接存储二进制数据的需求特别友好...2.2.4 WebSQL 在说WebSQL之前，需要强调一点，和H5离线缓存(manifest)一样，WebSQL已经不推荐使用了，推荐使用IndexedDB来作为前端数据库存储，W3C已经做废弃处理了
这里给大家举个例子，考虑到 LocalStorage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串： ?...2.IndexedDB的常见操作 在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。...建立打开IndexedDB ---- window.indexedDB.open("testDB") 这条指令并不会返回一个DB对象的句柄，我们得到的是一个 IDBOpenDBRequest对象，而我们希望得到的...从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。...总结 正是浏览器存储、缓存技术的出现和发展，为我们的前端应用带来了无限的转机。近年来基于存储、缓存技术的第三方库层出不绝，此外还衍生出了 PWA 这样优秀的 Web 应用模型。
有了IndexedDB，浏览器可以存储更多的数据，从而丰富了浏览器端的应用类型。 IndexedDB简介 IndexedDB和传统的关系型数据不同的是，它是一个key-value型的数据库。...你可以使用对象中的任何属性做为index，以加快查找。...IndexedDB API大部分都是异步的，在使用异步方法的时候，API不会立马返回要查询的数据，而是返回一个callback。...但是，通常来说带前缀的实现一般都是不稳定的，所以我们通常不建议在正式环境中使用，所以如果不支持标准表达式的话，需要直接报错： if (!...如果没有指定key path，那么存储的Object可以是任何对象，甚至是基础类型比如数字和String。 而key generator就是key的生成器。
典型的应用场景有： 记住密码，下次自动登录。 购物车功能。 记录用户浏览数据，进行商品（广告）推荐。...2.IndexedDB的常见操作 在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。...建立打开IndexedDB ---- window.indexedDB.open("testDB") 这条指令并不会返回一个DB对象的句柄，我们得到的是一个 IDBOpenDBRequest对象，而我们希望得到的...之间的区别 从上表可以看到，cookie 已经不建议用于存储。...总结 正是浏览器存储、缓存技术的出现和发展，为我们的前端应用带来了无限的转机。近年来基于存储、缓存技术的第三方库层出不绝，此外还衍生出了 PWA 这样优秀的 Web 应用模型。
在任何浏览器上，都可以从 Window 对象访问 localStorage 函数。...这意味着在页面上运行的任何 JavaScript 代码都可以访问存储，使你的应用程序容易受到「跨站点脚本（XSS）攻击」。...如果没有找到数据，该方法返回 null。...它还接受单个参数，即项的键，如果项不可用，则返回 undefined。...它不接受任何参数，并删除域的所有 localStorage 项。
: true }); /* 定义存储对象的数据项 * 第一个参数是创建的索引名称，可以为空 * 第二个参数是索引使用的关键名称，可以为空 * 第三个参数是可选配置参数，可以不传...添加到数据对象中, 传入javascript对象 objectStore.add(newItem); 新建操作是在新建了一个 事务（ IDBTransaction 对象）的前提下完成的，传入的数据不需要做任何转换...newRecord[key]; } } // 更新数据库存储数据 objectStore.put(record); }; 基本思路是创建一个事务，先找到想要修改的数据主体，然后在更新该数据主体内容...结束语 在业务开发中，我们都会碰到或多或少的本地存储需求，本文介绍了其中一种存储方案 IndexedDB 的简单实践。就我们的应用场景来看，IndexedDB 的适用面还是很广的。...文章内容较长，如果表达有误在所难免，欢迎交流指出。
如果不指定，默认为文档来源（由协议、域名和端口共同定义），不包含子域名。如果指定了Domain，则一般包含子域名。因此，指定 Domain 比省略它的限制要少。...设置document.cookie不会覆盖之前存在的任何cookie，除非设置了已有的cookie。...考虑到 localStorage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。...2.IndexedDB 使用流程 在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。...总结 正是浏览器存储、缓存技术的出现和发展，为我们的前端应用带来了无限的转机。近年来基于存储、缓存技术的第三方库层出不绝，此外还衍生出了 PWA 这样优秀的 Web 应用模型。
indexedDB IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据，它可以被网页脚本创建和操作。...* 可以不传值。...* 如果不设置id，会返回store里的全部对象 */ const getObject = (storeName, id) => { const objectPromise = new...v1 开始值 v2 结束值 v1isClose 是否闭合区间 v2isClose 是否闭合区间 where 钩子函数，可以不设置。...就是先把相关的功能和在一起，写一个操作类，然后在setup里面应用这个类就可以了，然后写点代码把各个类关联起来即可。 这样代码好维护多了。 小结 功能不是很完善，目前是自己够用的程度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
