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.pswp.cn/news/42148.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/42148.shtml
英文地址,請注明出處:http://en.pswp.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…

解決Windows系統遠程登陸后vscdoe無法輸入字符,鍵盤沒有反應,鼠標可以點擊,沒有反應

文章目錄 前言操作過程 前言 使用vscode編譯器時&#xff0c;通過遠程登錄或者屏幕鎖屏解鎖后&#xff0c;vscode出現無法輸入字符內容&#xff0c;但vscode沒有死機&#xff0c;切換到其他軟件的窗口再切換回來后&#xff0c;可以使用鼠標點擊&#xff0c;但是只要使用鍵盤輸…

【壓測】wg/wrk 輕量級壓測

wg/wrk 輕量級壓測 說明&#xff1a;環境是 centos&#xff0c;不過現在 centos 免費版本不再更新和維護了&#xff0c;所以大家可以用阿里云的或者用 ubuntu 內核 用的 https://github.com/wg/wrk.git 有 35k star 然后據我了解&#xff0c;windows 用 wrk 壓測有點麻煩&…

[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…

英語詞法——冠詞

冠詞是一種虛詞,與名詞連用,放在名詞的前面,說明或限制該名詞所表示的人或物是泛指的還是特指的。冠詞是最主要、最典型的限定詞。冠詞可以分為不定冠詞a,an,定冠詞the和零冠詞(即不用任何冠詞的場合)三種。 第一節 定冠詞 定冠詞the用于各類名詞(單數可數名詞、復數可…

linux 命令- systemctl

systemctl 參數說明 1、使用語法 用法&#xff1a;systemctl [OPTIONS…] {COMMAND} … 2 、參數說明 參數參數說明start立刻啟動后面接的unitstop立刻關閉后面接的unitrestart立刻關閉后啟動后面接的unit&#xff0c;亦即執行stop再start的意思reload不關閉后面接的unit的…

Elasticsearch查詢之Disjunction Max Query

前言 Disjunction Max Query 又稱最佳 best_fields 匹配策略&#xff0c;用來優化當查詢關鍵詞出現在多個字段中&#xff0c;以單個字段的最大評分作為文檔的最終評分&#xff0c;從而使得匹配結果更加合理 寫入數據 如下的兩條例子數據&#xff1a; docId: 1 title: java …

基于 Redis 實現分布式限流

基于 Redis 實現分布式限流 一、 簡介二、分布式限流1 數據結構1.1 Redis List1.2 Redis Set1.3 Redis Sorted Set 2 實現分布式限流3 實現原理分析 三、分布式限流算法1. 計數器算法2. 漏斗算法3. 令牌桶算法 四、分布式限流實戰1. 單機限流實現2. 基于Redis Clusters的分布式…

常見程序搜索關鍵字轉碼

個別搜索類的網站因為用戶惡意搜索出現誤攔截情況&#xff0c;這類網站本身沒有非法信息&#xff0c;只是因為把搜索關鍵字顯示在網頁中&#xff08;如下圖&#xff09;&#xff0c;可以參考下面方法對輸出的關鍵字進行轉碼 DEDECMS程序 本文針對Dedecms程序進行搜索轉碼&…

優先級隊列【C++】

文章目錄 priority_queuepriority_queue 使用priority_queue的模擬實現向上調整算法向下調整算法pushpoptopsizeempty 仿函數完整代碼 priority_queue 優先隊列&#xff08;priority_queue&#xff09;也是隊列的一種&#xff0c;priority_queue的接口是和queue的接口是相同的…

快速上手Vue開發:在項目中如何配置 tsconfig.json 文件?

文章目錄 一、簡介二、配置1、示例2、編譯器選項列表 一、簡介 tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項。 二、配置 1、示例 {"compilerOptions": {"baseUrl": ".","paths": {"/*": ["src/*&…

C#__基本特性和使用

// 特性&#xff08;attribute&#xff09;: // 一種允許我們向程序集添加元數據的語言結構 // 用于保存程序結構信息的某種特殊類型的類 // 類似“批注”&#xff0c;用于解釋說明 #define IsShowMessage // 宏定義&#xff0c;在開頭定義&#xff0…

uni-app彈窗列表滾動, 彈框下面的內容也跟隨滾動解決方案

滑動彈窗里的列表&#xff0c;彈框下面的內容也會跟著滑動&#xff0c;導致彈窗中的列表不能正常滾動 1.彈窗組件代碼&#xff0c;需要在最外層的view中加入touchmove.stop.prevent"moveHandle"&#xff0c;且彈窗中需要滾動的列表要使用scroll-view標簽包裹起來&…

Python爬蟲——requests_post請求

import requests import jsonurl https://fanyi.baidu.com/sugheaders {User-Agent: ,Cookie: }data {kw: hello }response requests.post(url, data, headersheaders)content response.textobj json.loads(content.encode(utf-8)) print(obj)總結&#xff1a; post請求…

五分鐘搭建生鮮蔬果小程序

如今&#xff0c;隨著移動互聯網的快速發展&#xff0c;小程序已經成為眾多企業和商家推廣產品和服務的重要工具。而生鮮蔬果行業作為一個常見的消費領域&#xff0c;也開始逐漸轉向小程序商城來進行銷售和服務。那么&#xff0c;如何從零開始搭建一個生鮮蔬果小程序商城呢&…

Hlang--用Python寫個解釋器

文章目錄 前言流程數學解釋器結果封裝數的操作運行時異常運行解釋實現總結前言 沒錯今天提前來做這個東西,昨天晚上干這個玩意差不多干了兩個多小時才搞定,導致凌晨2點才睡覺,最要命的是,寫著寫著突然想到有一道線代理解錯了,一個晚上,做夢全是這兩個東西。尤其是晚上效…

LeetCode150道面試經典題-- 快樂數(簡單)

1.題目 編寫一個算法來判斷一個數 n 是不是快樂數。 「快樂數」 定義為&#xff1a; 對于一個正整數&#xff0c;每一次將該數替換為它每個位置上的數字的平方和。然后重復這個過程直到這個數變為 1&#xff0c;也可能是 無限循環 但始終變不到 1。如果這個過程 結果為 1&am…

JVM——JVM參數指南

文章目錄 1.概述2.堆內存相關2.1.顯式指定堆內存–Xms和-Xmx2.2.顯式新生代內存(Young Ceneration)2.3.顯示指定永久代/元空間的大小 3.垃圾收集相關3.1.垃圾回收器3.2.GC記錄 1.概述 在本篇文章中&#xff0c;你將掌握最常用的 JVM 參數配置。如果對于下面提到了一些概念比如…