indexedDB基本使用（内含案例）

最新推荐文章于 2024-03-11 13:43:03 发布
最新推荐文章于 2024-03-11 13:43:03 发布
阅读量3.4k 收藏 29
点赞数 6
分类专栏： js 文章标签： html javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WiseGirls/article/details/118208209
版权

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-dialog
      title="编辑任务"
      :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: {
    // 初始化indexedDB
    indexedDB () {
      // 打开数据库，两个参数（数据库名字，版本号），如果数据库不存在则创建一个新的库
      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设置为false
        objectStore.createIndex('Task', 'Task', { unique: false })
        objectStore.createIndex('status', 'status', { unique: false })
      }
      // 数据库操作一切正常，所有操作后触发
      this.request.onsuccess = (event) => {
        this.db = event.target.result
        this.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 = false
          this.readList()
          this.addList = {
            id: new Date().getTime(),
            Task: '',
            status: false
          }
        }
        request.onerror = (event) => {
          this.$message.error('添加失败')
        }
      } else {
        this.$message.error('内容不能为空哦')
      }
    },
    updateTaskId (id) {
      this.updateDialogFormVisible = true
      this.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 = false
          this.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>
小小白号
关注
  • 6
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
minimum-indexed-db：对本机IndexedDB的最小包装
02-04
minimalIndexedDB 该库以超轻量级的方式处理本机IndexedDB（基本的单表CRUD）的最简单的应用程序，而没有indexedDB的复杂性。 安装 npm i minimal-indexed-db如果需要的话， npm i minimal-indexed-db使用--save-dev npm i minimal-indexed-db 用法 该数据库是要实例化的，然后就可以使用了。 请注意，如果不存在，它将创建一个数据库。 由于IndexedDB库是异步的，因此也是如此。 要最初使用数据库，请按照以下示例进行操作。 第一个参数是基本/表名，第二个参数是主键（这是可选的，默认为
浏览器存储--IndexedDB数据库的使用
失眠时间的博客
06-28 3498
IndexedDB是一个事务数据库系统，类似于基于SQL的RDBMS。然而，与使用固定列表的基于SQL的RDBMS不同，IndexedDB是一个基于JavaScript的面向对象数据库。为啥要使用呢？随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；
IndexDB完整使用指南
qq_42880714的博客
07-17 2089
IndexDB完整使用指南
vue2+Dexie.js基本使用——前端大容量存储IndexedDB 的包装库
最新发布
chy的博客
03-11 1533
前端大容量存储
浏览器数据库——IndexedDB的使用
QiuXiang_的博客
08-24 314
IndexedDB（Indexed Database）是一种用于在浏览器中存储和管理结构化数据的Web API。它提供了一种持久性的客户端存储解决方案，允许Web应用程序在浏览器中存储大量的数据，以便在不同的浏览会话之间保持状态、离线使用数据以及缓存数据。
indexeddb-promise:使用Promise封装IndexedDB
05-19
indexeddb-promise IndexedDB的所有操作都是异步的，API都是在回调函数中执行的，为了便于对其进行操作，使用ES6中的Promise来封装。 1. 安装 npm包 // use npm npm install --save-dev indexeddb-promise // use yarn yarn add --dev indexeddb-promise script引入 IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号： [removed][removed] 2. 使用 import IndexedDB from 'indexeddb-promise' const db = new Ind
使用IndexedDB的完整指南
haming11的博客
06-02 1627
IndexedDB是用于客户端存储的低级API。它是一个全面、持久的NoSQL存储系统，可在浏览器中使用，允许存储不同类型的数据，例如：文件或Blob图像和视频结构化数据，如对象、列表和数组IndexedDB可以用于各种场景，如缓存、PWA和游戏，还支持事务。它的开发是为了有效地满足web应用程序的多种需求。建立我们的项目我们不会做任何花哨的设置，因为IndexedDB是在网络上本地运行的。
浏览器存储几种方式简介
衣乌安、随笔
01-07 1550
往往做项目时会有一些特殊的需求，需要将一些信息存储到本地，如鉴权token、登录信息等这时一些不必要的请求就可以通过使用浏览器本地存储的方式来避免。 常用的浏览器存储方案有哪些呢？主要有：cookie、localStorage、sessionStorage以及indexDB。本文将对此进行简要介绍 cookie属于文档对象模型DOM树根节点document，而 sessionStorage、loc...
indexedDB使用
一个前端工作者的博客
10-18 390
indexedDB在vue3中的使用
IndexedDB-增增删改查示例
u013798595的博客
01-22 427
【代码】IndexedDB-增查示例。
浏览器数据库 IndexedDB 入门教程
飞翔的熊blabla
07-05 986
一、概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。 通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以
sample-react:KaiOS设备的待办事项清单的简单示例
05-15
用于KaiOS的示例React应用 待办事项清单的简单示例，有关更多信息，请参见 在人像设备中 在景观设备中 开始 npm run start # or yarn start 建立应用程式 npm run build # or yarn build 将应用程序发送到KaiOS设备 按照和安装到您的设备。
IndexedDB 基本使用.pdf
08-12
IndexedDB 基本使用
IndexedDB基本使用共22页.pdf.zip
11-23
IndexedDB基本使用共22页.pdf.zip
vue项目中格式化时间的三种办法
WiseGirls的博客
05-14 9337
格式化时间 1.第一种 <el-table-column label="创建时间" prop="create_time" :formatter="formatterTime" /> methods:{ formatterTime(row, column, cellValue, index) { return moment(cellValue * 1000).format('YYYY-MM-DD HH:mm:ss') }
上传图片
WiseGirls的博客
05-14 860
上传图片 写项目时，上传的图片如果过多，太占内存，所以可以利用腾讯云或七牛云之类的，创建一个单独的地方，存放涉及到的图片 下面利用腾讯云举例，并使用element ui的上传组件，完成上传图片的功能 1.腾讯云存储桶 注册腾讯云账号，并进行实名认证 点击自己的头像，进入账号中心，领取免费产品 回到对象存储-概览，在右侧的帮助文档处，打开开发者指南 可以将SecretId 和 SecretKey 复制到别的地方，方便后续使用 2.安装SDK 第一种：script 标签
vue3 吸顶搜索框在页面滚动时改变样式
WiseGirls的博客
08-09 708
监听滚动条距离顶部的距离，在距顶部40px内密集监听（依照自己的情况而定），不断改变样式，实现过度效果。
静态托管--在数据库存储本地图片地址却无法显示
WiseGirls的博客
05-06 479
在数据库中，我们会存储图片，但是在前端页面中调出数据后，却在页面中没有办法显示，我们就需要使用到静态托管， （1）.在后台的app.js文件中 在node.js的根目录下新建一个文件夹，存放本地的图片 const express = require('express'); const app = express(); app.use("/public/images", express.static("./public/images")); //第一个是你想要通过写什么路径访问图片，第二个是你图片要在哪个文件
浏览器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

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值