indexedDB中创建和使用索引

最新推荐文章于 2023-08-30 09:40:30 发布
最新推荐文章于 2023-08-30 09:40:30 发布
阅读量6.8k 收藏 6
点赞数 1
分类专栏： JS/DHTML/CSS 文章标签： indexedDB 索引
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuixiping/article/details/9906045
版权

前言

关于indexedDB的基础知识，可以查阅 Indexed Database API (W3C) s Using_IndexedDB (MDN) 和 使用IndexedDB (中文).

关于indexedDB的索引，我仔细翻看了W3C API才弄明白是怎么回事，在上面另外2个链接的教程中，都没有介绍索引的使用。

索引，就是以数据的快速查询为目的。

本文展示如何在indexedDB中创建和使用索引来优化数据查询。网上搜索到的indexedDB入门教程中，都没有介绍索引的使用，或是只带过了一下怎么创建索引，没提可以用来干什么。我在这里给出一个简洁完整的例子，示范一下indexedDB索引的使用。

索引需求场景示例

假设现在有一组如下的数据：

id   姓  姓名

1    张    张三

2    张    张四

3    张    张五

4    张    张六

最低0.47元/天 解锁文章
cuixiping
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Html5——indexedDB数据库学习记录4之【创建索引】
Superstatus的博客
06-03 551
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html; ch
HTML5 indexedDB数据库二之创建索引
shore‘s的博客
12-16 642
接上一章： 数据库版本更新时创建一个db： var mydb = { name:"myIndexeddb", version:1, db:null };//创建一个全局对象 var stus = [ {id:1,name:"小A",age:18}, {id:2,name:"小B",age:21}, {id:3,name:"小C"...
indexedDB复合索引
qq_42894622的博客
05-05 1088
目的：通过构建聚合索引，根据其中一个索引值匹配另一个索引值（不会对indexedDB数据进行深拷贝，只获取索引的值），提供性能优化 // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta nam
IndexedDB（二：索引）
weixin_34295316的博客
12-09 167
在HTML5本地存储——IndexedDB（一：基本使用）中介绍了关于IndexedDB的基本使用方法，很不过瘾，这篇我们来看看indexedDB的杀器——索引。 熟悉数据库的同学都知道索引的一个好处就是可以迅速定位数据，提高搜索速度，在indexedDB中有两种索引，一种是自增长的int值，一种是keyPath：自己指定索引列，我们重点来看看keyPath方式的索引使用. 创建索引 我们可以在创...
HTML5中indexedDB 数据库的使用实例
09-27
在本文中，我们将深入探讨如何使用IndexedDB进行数据操作，包括连接数据库、关闭数据库、删除数据库、创建对象仓库以及创建索引。 1. **连接数据库** 要连接IndexedDB数据库，首先需要调用`indexedDB.open`方法，...
IndexedDB基本使用共22页.pdf.zip
11-23
这个压缩包“IndexedDB基本使用共22页.pdf.zip”包含了22页关于IndexedDB的基础教程，旨在帮助开发者理解和掌握如何在Web应用中有效地使用IndexedDB。 IndexedDB是一个非关系型数据库，它允许开发者在用户浏览器中...
IndexedDB:索引数据库示例
07-06
IndexedDB 是一种在浏览器中存储大量结构化数据的离线存储技术，它是Web应用程序可以使用的本地数据库。这个技术允许开发者创建复杂的数据库，支持索引，进而实现快速的数据检索。在本文中，我们将深入探讨IndexedDB...
H5本地存储-indexedDB数据库（三）创建对象索引
前端技术分享
09-12 1109
创建对象索引 window.indexedDB=window.indexedDB || window.webkitIndexedDB|| window.mozIndexedDB||window.msIndexedDB; window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransact
IndexedDB 索引数据库
weixin_33881050的博客
04-30 180
作者：心叶时间：2018-04-30 15:36 IndexedDB采用对象保存数据，和平时使用的关系型数据库的操作有比较大的区别，下面从简单使用出发来慢慢学习它。 第一步：打开数据库，关闭数据库和删除数据库。 var database,indexedDB = window.indexedDB || window.mozIndexedDB...
indexedDB（一）简介以及创建
qq_38935512的博客
09-25 1516
简介 indexedDB 1.前端浏览器本地基于javascript的事务性数据库,相比其他的浏览器缓存LocalStorage 、cookie等相比，数据有以下特点 1.存储量大，理论上不封顶 2.同源策略是一样的 3.多数api采用的都是异步的方式，防止数据量大的时候阻塞其他的一些操作 4.通过对象仓库存储的方式 5.存储的类型比较丰富 6.能够为数据建立索引，提供查找性能 2.IndexedDB的特点 1.对象仓库，在indexedDB中是没有表的概念的，而是objectStore，一个数据库中
【前端笔记】indexDB使用简单介绍
于离别之朝束起约定之花的博客
07-02 2161
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。本页面 MDN IndexedDB 的主要引导页 - 这里，我们提供了完整的 API 参考和使用指南，浏览器支持细节，以及关键概念的一些解释的链接。——MDN。
indexDB的理解与使用
Mosum的博客
05-29 8296
indexDB的理解与使用 indexDB的理解与使用 创建数据库 创建对象仓库 创建事务 操作数据 添加数据 获取数据 删除数据 使用游标 索引 创建索引 使用索引 实践 创建数据库 const request = indexedDB.open('myDatabase', 1); request.addEventListener('success', e =&gt...
indexDB 基本用法总结
最新发布
qq_24418107的博客
08-30 726
IndexedDB 属于非关系型数据库。（不支持SQL查询）键值对储存 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。异步 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。
indexedDB的基础使用--索引
Meskjei的博客
04-04 1825
文章目录索引的创建createIndex的用法参数说明IDBIndex常用方法`IDBIndex.get()`用法参数`IDBIndex.getAll()`用法参数 根据MDN文档的描述，索引是一种为了在其他objectStore中查找数据的objectStore。用户可以使用这个接口来获取数据。 用户可以通过主键或者是索引来获取数据。索引可以让你使用记录中的值而不是主键来查找数据。 数组是一个长...
15分钟，带你了解indexedDB，这个前端存储方案很重要！
程序员成长指北
07-07 1138
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群关于文本作者：Django强哥原文：https://juejin.cn/post/6995112265766666247最近在给前端班授课，在这次之前的最后一次课已经是在2年前，2年的时间，前端的变化很大，也是时候要更新课件了。整理客户端存储篇章时模糊记得HTML5是有形成标准的数据库，但是当年好...
Indexeddb 创建、增删改查
然后他就拿棍子来打我
10-18 6504
虽然小伙伴平时项目用到的不多，但了解它并会使用还是很有必要。以下是本人总结 IndexedDB 的常规使用方式. 2. 打开数据库 3. 监听 IndexedDB 版本更新 新建数据库时，新增数据表。 更新数据库时，对数据表进行更新。 效果图如下 效果图如下 效果图如下 效果图如下 效果图如下
前端本地储存数据库 IndexedDB 零基础入门知识详解
starry-sea1412的弃坑之路
06-04 2110
IndexedDB 是一种在浏览器端存储大量结构化数据的 API。它是 HTML5 标准中的一部分，和 Web SQL Database 和 localStorage 类似都是浏览器端本地数据存储技术。由于 IndexedDB 的功能非常强大，所以学习和使用 IndexedDB 需要对浏览器端存储技术、JavaScript 异步编程、数据库设计和查询等方面都有深入了解。
简介 IndexedDB 及详解 IndexedDB 在实际项目中可能存在的问题与解决方案
caod1991的博客
01-06 5320
简介IndexedDB 详细文档请参看 MDN 文档链接 IndexedDB能做什么： 它真的很能存东西！ 对比cookie， local storeage， session storage 等受到大小限制的web存储方式， IndexedDB在理论上并无大小限制只与本地的磁盘相关。 这也是选择它作为web本地存储工具最大的理由。 完整的API文档（ 虽然大部分是英文Orz）， 不懂的直接翻文档...
js indexedDB创建存储
05-26
下面是使用IndexedDB创建存储的示例代码： ```javascript // 打开或创建一个名为“myDatabase”的数据库并创建一个名为“myStore”的存储 let request = indexedDB.open('myDatabase', 1); request.onerror = function(event) { console.log('打开数据库出错！'); }; request.onupgradeneeded = function(event) { let db = event.target.result; // 创建一个名为“myStore”的对象存储 let store = db.createObjectStore('myStore', { keyPath: 'id' }); // 添加一个名为“name”的索引 store.createIndex('name', 'name', { unique: false }); }; request.onsuccess = function(event) { let db = event.target.result; // 在“myStore”存储中添加一条记录 let transaction = db.transaction(['myStore'], 'readwrite'); let store = transaction.objectStore('myStore'); let data = { id: 1, name: 'John', age: 30 }; let request = store.add(data); request.onsuccess = function(event) { console.log('数据已成功添加到存储中！'); }; transaction.oncomplete = function(event) { db.close(); }; }; ``` 上面的代码打开或创建一个名为“myDatabase”的数据库，并在数据库中创建一个名为“myStore”的存储。然后，它创建一个名为“name”的索引，并在“myStore”存储中添加一条记录。最后，它关闭数据库连接。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值