indexedDB基本使用（内含案例）

indexedDB

indexDB是HTML5的新概念，用于将数据存储再用户的浏览器中，它是一个非关系型数据库，会将数据集作为个体对象存储，数据形式使用的是JSON

indexeddb比本地存储更强大，可用于需要存储大量数据的应用程序。这些应用程序可以更高效地运行，并且加载速度更快。

对象仓库objectStore

一个数据库中可以包含多个objectStore，objectStore可以存放多种类型数据，就相当于是一张表，可以使用每条记录中的某个指定字段作为键值（keypath），也可以使用自动生成的递增数字作为键值（keyGenerator），选择键的类型不同，objectStore可以存储的数据结构也有差异

基本语法

语法	作用
window.indexedDB.open(数据库名，版本号)	打开数据库（如果数据库不存在则创建一个新的库）
.onerror	数据库操作过程中出错时触发
.onupgradeneeded	创建一个新的数据库或者修改数据库版本号时触发
.onsuccess	数据库成功完成所有操作时触发
.createObjectStore(对象仓库名称，keypath)	创建对象仓库
.createIndex（索引名称，keypath，objectParameters）	建立索引
.transaction(对象仓库名称) \|\| .transaction(对象仓库名称，‘readwrite’)	创建一个事务 \|\| 创建一个事务，并要求具有读写权限
.objectStore(对象仓库名称)	获取对象仓库
.get ( num ) \|\| .getAll()	获取数据 \|\| 获取全部数据
.add( data )	添加数据
.put( newdata )	修改数据
.delete ( keypath )	删除数据

任务清单案例

<template><div><table cellspacing="0" cellpadding="8" border="1"><caption>今日任务清单<button @click="dialogFormVisible = true">+ 添加任务</button></caption><thead><tr><th>任务内容</th><th>状态</th><th>操作</th></tr></thead><tbody v-if="List.length !== 0"><tr v-for="item in List" :key="item.id"><td>{{ item.Task }}</td><td style="text-align: center">{{ item.status == false ? "未完成" : "已完成" }}</td><td style="text-align: center"><el-button size="small" @click="removeTask(item.id)">删除</el-button><el-button size="small" @click="updateTaskId(item.id)">编辑</el-button></td></tr></tbody><tbody class="elseTbody" v-else><tr><td colspan="2">今日你还没有想要做的事哦！</td></tr></tbody></table><el-dialog title="添加任务" :visible.sync="dialogFormVisible" width="90%"><el-form :model="addList"><el-form-item label="内容" label-width="40px"><el-input v-model="addList.Task" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addTask">确 定</el-button></div></el-dialog><el-dialogtitle="编辑任务":visible.sync="updateDialogFormVisible"width="90%"><el-form :model="addList"><el-form-item label="内容" label-width="40px"><el-input v-model="addList.Task" autocomplete="off"></el-input></el-form-item><el-form-item label="状态" label-width="40px"><el-switch v-model="addList.status"></el-switch></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="updateDialogFormVisible = false">取 消</el-button><el-button type="primary" @click="updateTask">确 定</el-button></div></el-dialog></div>
</template>
<script>
export default {data () {return {db: null,// 全部任务清单List: [],// 添加任务清单addList: {id: new Date().getTime(),Task: '',status: false},// 添加任务清单对话框显示dialogFormVisible: false,// 修改任务清单对话框显示updateDialogFormVisible: false}},created () {this.indexedDB()// this.readList()},methods: {// 初始化indexedDBindexedDB () {// 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库var request = window.indexedDB.open('TaskList', '1')// 数据库操作过程中出错，则错误回调被触发request.onerror = (event) => {console.log(event)}this.request = request// 创建一个新的数据库或者修改数据库版本号时触发request.onupgradeneeded = (event) => {var db = event.target.result// 创建对象仓库用来存储数据，把id作为keyPath，keyPath必须保证不重复，相当于数据库的主键var objectStore = db.createObjectStore('Today_Mission', { keyPath: 'id' })// 建立索引，name和age可能重复，因此unique设置为falseobjectStore.createIndex('Task', 'Task', { unique: false })objectStore.createIndex('status', 'status', { unique: false })}// 数据库操作一切正常，所有操作后触发this.request.onsuccess = (event) => {this.db = event.target.resultthis.readList()}},readList () {var transaction = this.db.transaction('Today_Mission').objectStore('Today_Mission')var request = transaction.getAll()request.onerror = (event) => {this.$message.error('事务失败')}request.onsuccess = (event) => {this.List = request.result}},addTask () {if (this.addList.Task !== '') {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').add(this.addList)request.onsuccess = (event) => {this.$message.success('添加成功')this.dialogFormVisible = falsethis.readList()this.addList = {id: new Date().getTime(),Task: '',status: false}}request.onerror = (event) => {this.$message.error('添加失败')}} else {this.$message.error('内容不能为空哦')}},updateTaskId (id) {this.updateDialogFormVisible = truethis.addList = this.List.find(item => item.id === id)},updateTask () {if (this.addList.Task !== '') {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').put(this.addList)request.onsuccess = (event) => {this.$message.success('数据更新成功')this.updateDialogFormVisible = falsethis.readList()this.addList = {id: new Date().getTime(),Task: '',status: false}}request.onerror = (event) => {this.$message.error('数据更新失败')}} else {this.$message.error('内容不能为空哦')}},removeTask (id) {this.$confirm('确定要删除这条任务嘛', '删除任务', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'error'}).then(() => {var request = this.db.transaction('Today_Mission', 'readwrite').objectStore('Today_Mission').delete(id)request.onsuccess = (event) => {this.$message.success('删除成功')this.readList()}}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})}}
}
</script>
<style>
table {width: 100%;border: 1px solid #ccc;
}
caption {padding: 20px 0px;font-size: 20px;font-weight: bold;
}
caption button {display: block;width: 100%;font-size: 13px;text-align: left;margin-top: 20px;height: 35px;border: 1px solid rgb(248, 206, 206);color: rgb(83, 81, 81);padding-left: 15px;background-color: rgb(255, 234, 223);
}
thead tr {height: 50px;
}
thead tr th {border-bottom: 1px solid #ccc;
}
tbody tr {font-size: 13px;
}
.elseTbody tr {height: 70px;font-size: 13px;letter-spacing: 2px;text-align: center;
}
</style>

indexedDB基本使用（内含案例）相关推荐

java中io流案例_Java IO流的简单使用通俗易懂超详细【内含案例】
IO流简单使用输入和输出是相对于程序来说的,读取到程序中叫做输入,写到文件中叫输出. InputStream 字节输入流 InputStream 字节输入流基类,是字节输入流所有类的超类 // 从输 ...
java security 详解_Spring Security入门教程通俗易懂超详细【内含案例】
Spring Security的简单使用简介 SSM 整合 Security 是比较麻烦的,虽然Security的功能比 Shiro 强大,相反却没有Shiro的使用量多 SpringBoot出现后 ...
java单例模式实例_Java设计模式之单例模式通俗易懂超详细【内含案例】
单例模式什么是单例模式 ? 确保程序中一个类只能被实例化一次,实现这种功能就叫单例模式单例模式的好处是什么 ? 方便控制对象节省资源减少浪费怎么实现单例模式 ? 构造私有化调用静态方法返回实 ...
前端数据库indexedDB入门
什么是indexDB 学习文档: 阮一峰老师的分享文档:浏览器数据库 IndexedDB 入门教程 - 阮一峰的网络日志官方API文档,纯英文,不过提供的代码很有用:Indexed Database ...
《Linux设备驱动开发详解》虚拟机及案例代码下载
虚拟机实验环境下载(内含案例代码): 链接:https://pan.baidu.com/s/1YNvAySz-_AgZ4F8rZSMfsg 提取码:vpdt 如果仅仅想下载代码不想要庞大的虚拟机, ...
PPT 下载 | 神策数据刘乐：智能推荐驱动业务增长应用与实践
本文内容根据神策数据智能推荐产品负责人刘乐在<智能推荐-业务应用与模型构建思路>主题沙龙中演讲整理所得.主要内容包括: 我们为什么需要推荐系统? 我们需要什么样的推荐系统? 推荐系统助力业 ...
《SysML精粹》学习记录--第五章
<SysML精粹>学习记录第五章:用例图(Use Case Diagram) 用例图简介用例图外框小结第五章:用例图(Use Case Diagram) 用例图简介用例图可以 ...
【案例】FFMPEG GIF音乐搞笑视频自动生成内含视频体验
这项目灵感来自[案例]别人卖1000刀!一套油管自动生产视频赚钱方法详解,踩了很多坑额 ,因为发现不管是我做出来的视频还是别人做出来的,效果体验都不怎么样,很没意思,基本看到封面就没有点击的欲望(可能 ...
stc单片机485发送多出一字节_单片机干货！STC8H案例制作分享（内含高清实物动图）...
本期,Lucy制作了九个案例分享给大家,分别为:流水灯.按键LED.数码管.点阵.定时蜂鸣器.NTC温度计.超声波测距仪.光敏RGB灯.氛围灯(红外) Lucy无偿提供全部案例的原理图和部分案例的代码 ...