vue 使用indexDB 简单完整逻辑

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.mzph.cn/news/42148.shtml

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

相关文章

eqtl-GWAS和GWAS-GWAS

目前教程中有eqtl-GWAS和GWAS-GWAS两种模式&#xff0c;其他模式比较少见&#xff0c;还未进行开发 数据类型cc为分类变量即case/control&#xff0c;quant为连续变量&#xff0c;eqtl数据默认quant coloc.abf有两个比较需要注意的点&#xff0c;就是数据集中N是代表样本量&am…

[Docker精进篇] Docker镜像构建和实践 (三)

前言&#xff1a; Docker镜像构建的作用是将应用程序及其依赖打包到一个可移植、自包含的镜像中&#xff0c;以便在不同环境中快速、可靠地部署和运行应用程序。 文章目录 Docker镜像构建1️⃣是什么&#xff1f;2️⃣为什么&#xff1f;3️⃣镜像构建一、用现有容器构建新镜像…

【IMX6ULL驱动开发学习】08.马达驱动实战:驱动编写、手动注册平台设备和设备树添加节点信息

目录 一、使用设备树 1.1 修改设备树流程 二、手动创建平台设备 三、总结&#xff08;附驱动程序&#xff09; 前情提要&#xff1a;​​​​​​​【IMX6ULL驱动开发学习】07.驱动程序分离的思想之平台总线设备驱动模型和设备树_阿龙还在写代码的博客-CSDN博客 手动注册…

Android中如何不编译源生模块

如果想让自己的app 替换系统的app 比如使用闪电浏览器替换系统的Browser 首先把闪电浏览器放到 vendor/rockchip/common/apps Android.mk LOCAL_PATH : $(call my-dir) include $(CLEAR_VARS)LOCAL_MODULE : Lightning LOCAL_SRC_FILES : $(LOCAL_MODULE).apk LOCAL_MODULE_C…

linux 命令- systemctl

systemctl 参数说明 1、使用语法 用法&#xff1a;systemctl [OPTIONS…] {COMMAND} … 2 、参数说明 参数参数说明start立刻启动后面接的unitstop立刻关闭后面接的unitrestart立刻关闭后启动后面接的unit&#xff0c;亦即执行stop再start的意思reload不关闭后面接的unit的…

常见程序搜索关键字转码

个别搜索类的网站因为用户恶意搜索出现误拦截情况&#xff0c;这类网站本身没有非法信息&#xff0c;只是因为把搜索关键字显示在网页中&#xff08;如下图&#xff09;&#xff0c;可以参考下面方法对输出的关键字进行转码 DEDECMS程序 本文针对Dedecms程序进行搜索转码&…

优先级队列【C++】

文章目录 priority_queuepriority_queue 使用priority_queue的模拟实现向上调整算法向下调整算法pushpoptopsizeempty 仿函数完整代码 priority_queue 优先队列&#xff08;priority_queue&#xff09;也是队列的一种&#xff0c;priority_queue的接口是和queue的接口是相同的…

C#__基本特性和使用

// 特性&#xff08;attribute&#xff09;: // 一种允许我们向程序集添加元数据的语言结构 // 用于保存程序结构信息的某种特殊类型的类 // 类似“批注”&#xff0c;用于解释说明 #define IsShowMessage // 宏定义&#xff0c;在开头定义&#xff0…

uni-app弹窗列表滚动, 弹框下面的内容也跟随滚动解决方案

滑动弹窗里的列表&#xff0c;弹框下面的内容也会跟着滑动&#xff0c;导致弹窗中的列表不能正常滚动 1.弹窗组件代码&#xff0c;需要在最外层的view中加入touchmove.stop.prevent"moveHandle"&#xff0c;且弹窗中需要滚动的列表要使用scroll-view标签包裹起来&…

五分钟搭建生鲜蔬果小程序

如今&#xff0c;随着移动互联网的快速发展&#xff0c;小程序已经成为众多企业和商家推广产品和服务的重要工具。而生鲜蔬果行业作为一个常见的消费领域&#xff0c;也开始逐渐转向小程序商城来进行销售和服务。那么&#xff0c;如何从零开始搭建一个生鲜蔬果小程序商城呢&…

Hlang--用Python写个解释器

文章目录 前言流程数学解释器结果封装数的操作运行时异常运行解释实现总结前言 没错今天提前来做这个东西,昨天晚上干这个玩意差不多干了两个多小时才搞定,导致凌晨2点才睡觉,最要命的是,写着写着突然想到有一道线代理解错了,一个晚上,做梦全是这两个东西。尤其是晚上效…

LeetCode150道面试经典题-- 快乐数(简单)

1.题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结果为 1&am…

Linux系统之安装my-mind思维导图工具

Linux系统之安装my-mind思维导图工具 一、my-mind介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查端口占用情况 四、安装httpd4.1 检查本地yum仓库4.2 安装httpd4.3 关闭防火墙和selinux4.4 创建…

arcgis数据采集与拓扑检查

1、已准备好一张配准好的浙江省行政区划图&#xff0c;如下&#xff1a; 2、现在需要绘制湖州市县级行政区划。需要右击文件夹新建文件地理数据库&#xff0c;如下&#xff1a; 其余步骤均默认即可。 创建好县级要素数据集后&#xff0c;再新建要素类&#xff0c;命名为县。 为…

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,containsKey)五(117)

需求&#xff1a;前端根据后端的返回数据&#xff1a;画统计图&#xff1b; 1.动态获取地域数据以及数据中的平均值&#xff0c;按照平均值降序排序&#xff1b; 说明&#xff1a; X轴是动态的&#xff0c;有对应区域数据则展示&#xff1b; X轴 区域数据降序排序&#xff1b;…

ebay灯串UL报告 UL588检测标准

季节性和装饰性照明用品即灯串以及配件都是便携式插头连接的临时性商品&#xff0c;最大额定输入电压为 120 伏。 由 ILAC ISO 17025 认证的实验室出具的检测报告&#xff0c;确认每件商品均已经过检测&#xff0c;符合下列要求&#xff1a; 季节性和装饰性照明用品(灯串&…

企业中商业智能BI,常见的工具和技术

商业智能&#xff08;Business Intelligence&#xff0c;简称BI&#xff09;数据可视化是通过使用图表、图形和其他可视化工具来呈现和解释商业数据的过程。它旨在帮助组织更好地理解和分析他们的数据&#xff0c;从而做出更明智的商业决策。 常见的商业智能数据可视化工具和技…

AtcoderABC222场

A - Four DigitsA - Four Digits 题目大意 给定一个整数N&#xff0c;其范围在0到9999之间&#xff08;包含边界&#xff09;。在将N转换为四位数的字符串后&#xff0c;输出它。如果N的位数不足四位&#xff0c;则在前面添加必要数量的零。 思路分析 可以使用输出流的格式设…

鼠标样式和指向

学习抖音&#xff1a; 渡一前端教科频道 图上指针跟着鼠标移动&#xff0c;并且改变方向 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><style>* {padding: 0;margin: 0;}.arrow {position: fixed;width: 3…

Spring Clould 消息队列 - RabbitMQ

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; 初识MQ-同步通讯的优缺点&#xff08;P61&#xff0c;P62&#xff09; 同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&…