vue 使用indexDB 简单完整逻辑

news2024/11/24 8:32:07

1 npm

npm install idb

2 代码

<template>
  <div>
    <p>Data: {{ data }}</p>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import { openDB } from 'idb';

export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    async fetchData() {
      // 发送第三方请求 url 填写
      const response = await fetch(url);
      const data = await response.json();

      // 将数据存储到 IndexedDB 中
      let db = await openDB('my-store', 1, {

        upgrade(db) {
        
          db.createObjectStore('my-store');
        }
      });
      db = await openDB('my-store', 1);
     )
      const tx = db.transaction('my-store', 'readwrite');
      const store = tx.objectStore('my-store');
      console.log('store', store)
      await store.put(data, 'my-data');
      await tx.done;

      // 从 IndexedDB 中获取数据
      const tx2 = db.transaction('my-store');
      const data2 = await tx2.objectStore('my-store').get('my-data');
      await tx2.done;

      // 更新数据
      this.data = data2;
      console.log(data2)
    }
  }
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/893203.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sid=‘*‘和sid=‘orcl1‘的区别--实战问题

客户有个11g rac环境&#xff0c;前一段时间db1内存故障了&#xff0c;更换后需要调整db1的sga和pga&#xff0c;操作如下 SQL> alter system set sga_target25G scopespfile sid*; System altered. SQL> alter system set sga_max_size25G scopespfile sid*; Syste…

flowable流程部署只生成了act_re_deployment,未生成act_re_procdef

绘制的流程图 使用错误检测功能 没有检测到错误 下载后重名vacation.bpmn201.xml部署。 /*** 流程部署*/Testpublic void testDeploy() {//1.获取ProcessEngine对象ProcessEngine processEngine ProcessEngines.getDefaultProcessEngine();//2、获取RepositoryServiceReposi…

【面试高频题】难度 3/5,字典树热门运用题

题目描述 这是 LeetCode 上的 「745. 前缀和后缀搜索」 &#xff0c;难度为 「困难」。 Tag : 「字典树」 设计一个包含一些单词的特殊词典&#xff0c;并能够通过前缀和后缀来检索单词。 实现 WordFilter 类&#xff1a; WordFilter(string[] words) 使用词典中的单词 words 初…

PyTorch学习笔记(十三)——现有网络模型的使用及修改

以分类模型的VGG为例 vgg16_false torchvision.models.vgg16(weightsFalse) vgg16_true torchvision.models.vgg16(weightsTrue) print(vgg16_true) vgg16_true.classifier.add_module("add_linear",nn.Linear(1000,10)) print(vgg16_true) vgg16_false.classifie…

mysql的快速复习 和一些思考记录

数据库设计 第一范式&#xff1a;有主键&#xff0c;具有原子性&#xff0c;字段不可分割 数据库表中不能出现重复记录&#xff0c;每个字段是原子性的不能再分 关于第一范式&#xff0c;每一行必须唯一&#xff0c;也就是每个表必须有主键。 每一列不可再分&#xff01;&#…

C++之ostream与ifstream读写文件操作(一百八十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

「2024」预备研究生mem-论证推理强化:引入前提(下)

一、论证推理强化&#xff1a;引入前提&#xff08;下&#xff09; 二、课后题

基于JAVA的仓库管理系统java库房仓储进销存jsp源代码

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于JAVA的仓库管理系统 系统有2权限&#xff1a;用户…

医院智慧配电能效平台系统的建设与实践

摘 要&#xff1a;为降低医院建筑能耗&#xff0c;通过将精细化管理引入医院建筑能源系统&#xff0c;细化分析医院能耗特点和能源管理流程&#xff0c;设计决策过程和构建评价标准&#xff0c;形成能源系统精细化管理体系。以广州市番禺中心医院为例&#xff0c;通过建立能效评…

【JavaScript】使用js实现滑块验证码功能与浏览器打印

滑块验证码 效果图&#xff1a; 实现思路&#xff1a; 根据滑块的最左侧点跟最右侧点&#xff0c; 是否在规定的距离内【页面最左侧为原点】&#xff0c;来判断是否通过 html代码&#xff1a; <!DOCTYPE html> <html><head><title>滑动图片验证码&…

视觉中国又“翻车”,但其2023年H1净利润暴涨近80%!

大数据产业创新服务媒体 ——聚焦数据 改变商业 一个体量并不大的公司&#xff0c;多次惹众怒&#xff0c;公司却依然活的很好。这样的公司到底是如何经营的呢&#xff1f;这不禁让人好奇。 对于广大媒体尤其是自媒体而言&#xff0c;视觉中国是一个特殊的名字。也因其“独特”…

Kotlin~Bridge桥接模式

概念 抽象和现实之间搭建桥梁&#xff0c;分离实现和抽象。 抽象&#xff08;What&#xff09;实现&#xff08;How&#xff09;用户可见系统正常工作的底层代码产品付款方式定义数据类型的类。处理数据存储和检索的类 角色介绍 Abstraction&#xff1a;抽象 定义抽象接口&…

uni-app中监听网络状态,并在嵌入webView页面的组件中添加网络监测

uni-app中监听网络状态&#xff0c;并在嵌入webView页面的组件中添加网络监测 uni-app中监听网络状态 下载插件 打开网络异常组件页面&#xff0c;点击"下载插件并导入HBuilderX"按钮&#xff0c;打开HBuilderX软件后&#xff0c;选择需要导入插件的项目&#xff…

Web菜鸟入门教程 - Springboot接入认证授权模块

网络安全的重要性不言而喻&#xff0c;如今早已不是以前随便弄个http请求就能爬到数据的时代&#xff0c;而作为一个架构师&#xff0c;网络安全必须在产品开发之初就考虑好。因为在产品开发的后期&#xff0c;一方面是客户增多&#xff0c;压力变大&#xff0c;可供利用的时间…

Java Persistence APl(JPA)——JPA是啥? SpringBoot整合JPA JPA的增删改查 条件模糊查询 多对一查询

目录 引出Jpa是啥&#xff1f;Jpa的使用创建实体类写dao接口类写服务类 crud增删改查增加修改根据id删除全查询分页查询 条件查询模糊查询单条件查询多条件查询模糊查询排序查询 多对一查询定义实体类auto主键策略下新增进行全查询测试 全部代码application.yml配置类pom配置文…

桌面软件开发框架 Electron、Qt、WPF 和 WinForms 怎么选?

一、Electron Electron 是一个基于 Web 技术的跨平台桌面应用程序开发框架。它使用 HTML、CSS 和 JavaScript 来构建应用程序界面,并借助 Chromium 渲染引擎提供强大的页面渲染能力。Electron 的主要特点包括: 跨平台:Electron 可以在 Windows、macOS 和 Linux 等多个主流操…

18万字应急管理局智慧矿山煤矿数字化矿山技术解决方案WORD

导读&#xff1a;原文《18万字应急管理局智慧矿山煤矿数字化矿山技术解决方案WORD》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 目 录 第一章 项目概述 1.1项目…

C的进阶C++学习方向

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的…

创建和运行 Ansible 临时命令

创建和运行 Ansible 临时命令 作为系统管理员&#xff0c;您需要在受管节点上安装软件。 请按照正文所述&#xff0c;创建一个名为 /home/curtis/ansible/adhoc.sh 的 shell 脚本&#xff0c;该脚本将使用 Ansible 临时命令在各个受管节点上安装 yum 存储库&#xff1a; 存储库…

一次Linux中的木马病毒解决经历(6379端口---newinit.sh)

病毒入侵解决方案 情景 最近几天一直CPU100%,也没有注意看到了以为正常的服务调用,直到腾讯给发了邮件警告说我的服务器正在入侵其他服务器的6379端口,我就是正常的使用不可能去入侵别人的系统的,这是违法的. 排查 既然入侵6379端口,就怀疑是通过我的Redis服务进入的我的系统…