浏览器数据库indexedDB+vue实现简单的新增、删除和获取数据列表

最新推荐文章于 2024-04-08 09:08:12 发布
最新推荐文章于 2024-04-08 09:08:12 发布
阅读量3.1k 收藏 8
点赞数 4
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35958891/article/details/105112381
版权

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.tips{
        position: fixed;
        right: 0;
        top: 4px;
        z-index: 100;
        width: 200px;
        height: 40px;
        line-height: 40px;
        color: blue;
        border-right: none;
        padding-left: 10px;
        border: 1px solid blue;
        border-right: none;
      }
    </style>
	</head>
	<body>
		<div id="app">

			<!-- 输入区域 -->
			<div>
				姓名： <input v-model="person.name" type="text">
			</div>
			<div>
				年龄： <input v-model="person.age" type="text">
			</div>
			<div>
				身高： <input v-model="person.height" type="text">
			</div>
			<div>
				<button @click="clickAdd">新增</button>
			</div>

			<!-- 展示区域 -->
			<div>
				<p v-for="(item,index) in list" :key="index">
					<span>性名：{{item.name}} </span>
					<span>年龄：{{item.age}} </span>
					<span>身高：{{item.height}}</span>
					<button @click="clickDel(item.id)">删除</button>
				</p>
			</div>

			<!-- tips -->
			<div v-show="tipsShow" class="tips">！{{msg}}</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						person: {
							name: '',
							age: '',
							height: ''
						},
						list: [],
						tipsShow: false,
						msg: ''
					}
				},
				created() {
					this.initDB()
				},
				methods: {
					notify(msg) {
						this.msg = msg;
						this.tipsShow = true;
						setTimeout(() => {
							this.tipsShow = false;
						}, 1000)
					},
					initDB() {
						let request = indexedDB.open('myDB');

						// err
						request.onerror = event => {
							console.log('数据库打开/创建报错', event)
						}

						//如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。
						//升级后自动触发success
						request.onupgradeneeded = event => {
							let db = event.target.result;
							this.db = db;
							//建表 名为person,主键为id
							let store = db.createObjectStore('person', {
								keyPath: 'id'
							});
							//新建索引名称、索引所在的属性、配置对象（说明该属性是否允许有重复的值）
							store.createIndex('name', 'name', {
								unique: false
							});
							store.createIndex('age', 'age', {
								unique: false
							});
							store.createIndex('height', 'height', {
								unique: false
							});

							console.log('数据库升级')
						}

						// success
						request.onsuccess = event => {
							this.db = event.target.result;
							console.log('数据库打开/创建成功', event)
							this.getList();
						}
					},
					clickAdd() {
						// 建立读写事务,向对象仓库写入数据记录
						let request = this.db.transaction(['person'], 'readwrite').objectStore('person').add({
							id: new Date().getTime(),
							name: this.person.name,
							age: this.person.age,
							height: this.person.height
						})
						request.onsuccess = event => {
							this.notify('新增成功')
							this.person = {}
							// 获取数据列表
							this.getList()
						};

						request.onerror = event => {
							this.notify('重复数据写入失败')
						}
					},
					read() {
						var transaction = this.db.transaction(['person']);
						let objectStore = transaction.objectStore('person');
						let request = objectStore.get(3);

						request.onerror = function(event) {
							console.log('获取列表失败');
						};

						request.onsuccess = function(event) {
							if (request.result) {
								console.log('Name: ' + request.result.name);
								console.log('Age: ' + request.result.age);
								console.log('Email: ' + request.result.email);
							} else {
								console.log('未获得数据记录');
							}
						};
					},
					getList() {
						var transaction = this.db.transaction(['person']);
						let objectStore = transaction.objectStore('person');
						let list = [];
						// 遍历数据库
						objectStore.openCursor().onsuccess = event => {
							let cursor = event.target.result;
							if (cursor) {
								list.push(cursor.value)
								cursor.continue();
							}else{
							  this.list = list;
							}
						}

						
					},
					update() {
						let request = this.db.transaction(['person'], 'readwrite').objectStore('person').put({
							id: 1,
							name: '李四',
							age: 35,
							email: '434346463@qq.com',
							test1: 66666,
							test2: 77777
						})
						request.onsuccess = event => {
							console.log('数据更新成功')
						}

						request.onerror = event => {
							console.log('数据更新失败')
						}
					},
					clickDel(id) {
						var request = this.db.transaction(['person'], 'readwrite')
							.objectStore('person')
							.delete(id);

						request.onsuccess = event => {
							this.notify('删除成功')
							this.getList()
						};

						request.onerror = event => {
							this.notify('删除失败')
						}
					}
				}
			})
		</script>
	</body>
</html>
九段刀客
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML5 客户端数据库简易使用:IndexedDB
11-21
IndexedDB介绍 IndexedDB是一种能在浏览器中持久的存储结构化数据的对象数据库，并且为web应用提供了丰富的查询能力。 相比于Web SQL数据库它更加简单，而且官方标准中关于Web SQL的工作已经停止。 相比于Web Storage，IndexedDB存储空间是无上限且永久的。 创建数据库 IndexedDB是按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表/对象仓库），一个对象存储空间可以存储多个对象数据(索引的字段)。 function openDB(){ var request = indexedDB.open(db
vue-idb-仅使用IndexedDB（Dexie.js）或自动创建且可扩展的vuex模块进行列表和大型列表管理-Vue.js开发
05-27
vue-idb基于Dexie的Vuejs索引数据库包装npm install vue-idb --save用法从'vue'导入Vue从'vue-idb'导入VueVue.us vue-idb基于Dexie安装的Vuejs索引数据库包装npm install vue-idb-保存用法从'vue'导入Vue从'vue-idb'导入VueIdb Vue.use（VueIdb）const idb = new VueIdb（{版本：1，数据库：'test'，模式：[{测试： 'id，title，created_at，updated_at'}，{posts：'id，owner'}]}）new Vue（{el：'#app'，idb：idb，render：h => h（App）}）0.2 .0 BUGFIX关于在现有DB UPDATES依赖项上添加架构的BUGFIX＃32 0.1.11 BUGFIX ADD xxxRese
Vue使用 IndexDB vue操作IndexDB数据库 Vue操作IndexDB数据库_vue indexdb
最新发布
2301_77033583的博客
04-08 1076
*
HTML5中indexedDB 数据库的使用实例
09-27
本篇文章主要介绍了HTML5中indexedDB 数据库的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
GoDB.js:IndexedDB with Intuitive API，轻松搞定浏览器数据库:party_popper:
05-06
English | GoDB.js 具有Intuitive API的IndexedDB，具有一行代码的CRUD。 警告：此项目目前处于Beta状态，表示： 不要在任何严肃的项目中使用它 设计的功能尚未完全实现 这些API将来可能会发生重大变化 如果您认为有帮助，请给该项目加星标，谢谢〜 安装 npm install godb 用法 用一行代码执行CRUD操作： import GoDB from 'godb' ; const testDB = new GoDB ( 'testDB' ) ; const user = testDB . table ( 'user' ) ; const data = { name : 'luke' , age : 22 } ; user . add ( data ) // Create . then ( luke => user . get ( lu
vue_spa3cms3：IndexedDB + Dexie.js + Vue CLI，cms显示应用
02-10
vue_spa3cms3 版本：0.9.1 作者：中岛浩司/ kuc-arc-f.com 日期：2020/07/19 更新：2020/08/29 概要 IndexedDB + Dexie.js + Vue CLI，CMS显示应用程序 建立 npm install -g @ vue / cli VUE创建我的项目 cd我的项目 启动服务器 npm npm install-保存dexie 启动服务器 npm运行发球 建立项目，部署 npm运行构建 样本，CMS编辑应用 博客 ： GitHub页数：2020/08/02
VUE+前端数据存储indexDB
liona_koukou的博客
02-28 4506
背景 最近项目中基于需求限制需要使用mineMap地图绘制路段，路段数据有3万+条（大概27.6M），前后端请求一次耗时38s，这么长的基础数据请求时间对任何一个项目来说都是无法接受的。基于此前后端做了以下操作以期解决这个问题： 后端清除不需要的返回字段，处理后数据大小降至18.6M，请求时间缩短至28s 前端寻求浏览器存储大量数据的方案只在第一次打开页面时请求，后续均从浏览器存储中获取数据（indexDB） 路段数据由基础路段和虚拟路段组成，虚拟路段可能会变化，沟通此处需求是否可以变更为只渲染..
关于vue中使用indexDB的总结
李水灵的博客
08-16 3303
老规矩，先挂官网链接 https://www.npmjs.com/package/idb-js 关于indexDB 是什么，用到什么地方我就不再解释，百度多得很，只说我在使用的过程中的一些问题 官网解释： 引入及简单使用 安装： npm install idb-js --save 使用： 第一步：引入db import Idb from 'idb-js' // 引入Idb 第二步：引入数据库配置 import db_student_config from './db_student_con
indexDb使用
qq_39692513的博客
08-31 537
indexDb的使用&优缺点
indexDB入门到精通，indexdb增删查改，封装indexdb类库，indexdb基本使用
热门推荐
淋雨一直走~
11-29 3万+
indexdb入门操作指南，indexdb入门到精通，indexdb封装类库，indexdb的基本使用，超大容量的存储indexdb简单使用，web端的数据库，web端的大容量存储，优化浏览器加载资源速度。
Vue使用 IndexDB vue操作IndexDB数据库 Vue操作IndexDB数据库
半只
10-30 1672
原生 IndexDB操作API并不是很方便，可以使用第三方类库，可以极大的减少工作量，调用IndexDB和LocalStore API很像，我这边使用过的是。，数据格式 是和 数据库一样，可以创建多个数据库，数据库里面有多个表。还有删除、查询等更多API不一一演示了，可以进入。在 demoDataBase数据库新增一条数据。支持并不是很好，有内存限制，并且数据过大。查看是否生效，数据已经新增上去了，一共两条。解析和存储性能不是很好，这时候可以使用。都足够了，但是 如果要考虑大数据的话，
深入解析HTML5的IndexedDB索引数据库
01-21
对于应用来说IndexedDB非常强大、有用，可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。 什么是IndexedDBIndexedDB，HTML5新的数据存储，可以在客户端存储、...
IndexDB数据库操作指南
马优晨
10-25 2万+
在写这篇文章的时候，确实有一点点小困了。但是对于IndexDB数据库研究了整整三天的心血，在蓝瘦，香菇还是决定把这个东西介绍给大家。目前IndexDB数据库已经发展的很快了，IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。对于传统的Cookie最多也就4KB，
indexDB vue 批量创建表 和 批量插入数据
tenc1239的博客
08-22 897
方法的参数类型都是任意类型，可以是简单类型（如字符串、数字等），也可以是对象、数组等复杂类型。它们的主要区别在于对于已存在的数据的处理方式。1 如果你不知道数据库的版本号，可以省略第二个参数，这样 indexedDB 会默认为你打开最新版本的数据库，因为版本号总是自增长的。因此，如果你希望同一个主键值能够对应多条数据，那么可以使用。如果你希望同一个主键值只对应一条数据，那么可以使用。
JavaScript笔记之indexedDB的轻量化使用(增删改查)
Spider_wang的博客
05-04 1600
前些日子尝试使用 HTML5 的 indexedDB，发现标准提出来的非关系型数据库真的很难用，根据自己理解基于 indexedDB 封装了一个轻量级的数据库管理类，能够快速的建表、存数据。 1.需求分析 介于 indexedDB 不人性化的事务操作，以及神奇的建表逻辑（只能通过升级数据库，在升级事件内建表！），考虑自己实际需求做了以下的取舍： 因为轻量级原因，我只需要建多张表而不需要建数据库，因此全局只要维护一个数据库实例即可； 因其离谱的建表逻辑（也有可能我没把握住），通过多次尝试，最终选择在需要.
index DB使用方法，学生成绩信息存储本地
m0_60112757的博客
10-15 1510
indexDB是一个存放在服务器端的本地数据库，类似于NoSQL。这是一个学生成绩信息存储本地的功能。可以查看数据、添加数据，删除数据，修改数据。
【VUE】localStorage、indexedDB跨域数据操作实战笔记
无限循环
08-07 537
localStorage、indexedDB等跨域进行CRUD管理，实战笔记
indexDB-基础使用-vue篇
crazy_9586661的博客
09-15 1593
indexDB基础操作
indexDB在vue项目中的应用
jimjack2013的博客
03-19 4876
ndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然Web Storage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。 （1）Indexed DB： 索引数据库，操作简便，目前主流浏览器正努力实现对index DB的支持。 Web SQL Database实际上已经被废弃，...
浏览器IndexedDB数据库使用方法
06-10
IndexedDB 是浏览器提供的本地数据库，可以在浏览器中存储结构化数据。下面是 IndexedDB 的基本使用方法： 1. 打开数据库 使用 `indexedDB` 对象的 `open()` 方法打开数据库，如下所示： ``` let request = indexedDB.open('myDB', 1); ``` 其中，第一个参数是数据库名称，第二个参数是数据库版本号。如果数据库不存在，则会创建一个新的数据库。 2. 创建对象仓库 在成功打开数据库的回调方法 `request.onsuccess` 中，可以获取到数据库对象 `event.target.result`，然后使用它的 `createObjectStore()` 方法创建一个对象仓库（即数据表），如下所示： ``` let db = event.target.result; let objectStore = db.createObjectStore('people', { keyPath: 'id' }); ``` 其中，第一个参数是对象仓库的名称，第二个参数是一个对象，包含一个 keyPath 属性和其他可选属性。keyPath 用来指定数据表中的主键。 3. 添加数据 使用事务 `db.transaction()` 开启一个事务，然后使用 `add()` 方法向数据表中添加数据，如下所示： ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.add({ id: 1, name: 'John Doe' }); ``` 其中，第一个参数是一个数组，包含要访问的对象仓库的名称，第二个参数是事务类型，可以是 'readonly' 或 'readwrite'。`add()` 方法的参数是要添加的数据。 4. 查询数据 使用事务 `db.transaction()` 开启一个事务，然后使用 `get()` 方法查询数据，如下所示： ``` let transaction = db.transaction(['people']); let objectStore = transaction.objectStore('people'); let request = objectStore.get(1); request.onsuccess = function(event) { console.log('Name: ' + event.target.result.name); }; ``` `get()` 方法的参数是要查询的数据的主键值。查询结果保存在 `request.onsuccess` 回调方法中的 `event.target.result` 中。 5. 更新数据 使用事务 `db.transaction()` 开启一个事务，然后使用 `put()` 方法更新数据，如下所示： ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.put({ id: 1, name: 'Jane Doe' }); ``` `put()` 方法的参数是要更新的数据。 6. 删除数据 使用事务 `db.transaction()` 开启一个事务，然后使用 `delete()` 方法删除数据，如下所示： ``` let transaction = db.transaction(['people'], 'readwrite'); let objectStore = transaction.objectStore('people'); let request = objectStore.delete(1); ``` `delete()` 方法的参数是要删除的数据的主键值。 以上就是 IndexedDB 的基本使用方法。需要注意的是，IndexedDB 的 API 非常庞大，不仅仅包含上面提到的这些方法，还包括索引、游标、版本升级等功能。如果需要更详细的介绍和示例代码，可以参考 MDN 的文档：https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九段刀客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值