【JS】indexedDB基本入门使用;

 本文基本仅做个人简单学习记录;

相关TS类型:

  • IDBDatabase:open成功后的 result 为 IDBDatabase类型 > idb.result;

  • transaction: transaction(storeNames: string | string[], mode?: IDBTransactionMode, options?: IDBTransactionOptions): IDBTransaction;

  • IDBTransaction:

  • IDBObjectStore: 调用 IDBTransaction类型下面的该函数 objectStore(name: string): IDBObjectStore 后返回的实例就是IDBObjectStore;  该类型的实例就是专门对数据库进行增删改查的了;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>console.log("同步测试1");console.log(indexedDB);const idb = indexedDB.open("db_name_1"); // MyTestDatabaselet db; // 连接成功后将数据库实例绑定到该变量上;console.log(idb);idb.onupgradeneeded = function (event) {console.log("如果数据库不存在或版本号较低,就会触发 onupgradeneeded 事件");// 通常情况下,在这执行数据库结构的变更,比如创建对象存储空间、设置索引等操作。// 创建对象存储空间const objectStore = db.createObjectStore("customers", {keyPath: "id",});};idb.onerror = (event) => {// 错误事件遵循冒泡机制。// 错误事件都是针对产生这些错误的请求的,然后事件冒泡到事务,然后最终到达数据库对象。document.body.innerHTML += "<li>Error loading database.</li>";console.log(event, "失败建立");};idb.onsuccess = (event) => {// 保存 IDBDatabase 接口db = idb.result;db.onerror = (event) => {// 可以仅针对此数据库请求的所有错误的通用错误处理器!console.error(`数据库错误:`, event.target);};document.body.innerHTML += "<li>成功</li>";setData();};console.log("同步测试2");function setData() {// 添加数据到数据库const transaction = db.transaction(["customers"], "readwrite");const objectStore = transaction.objectStore("customers");const customer = { id: 1, name: "Alice", email: "alice@example.com" };const addRequest = objectStore.add(customer);addRequest.onerror = function (event) {// getData(1);putData();};addRequest.onsuccess = function (event) {console.log("Data added successfully");getData(2);};}function putData() {const transaction = db.transaction(["customers"], "readwrite");const objectStore = transaction.objectStore("customers");const newData = {id: 1,name: "修改后的值" + Math.random(),}console.log("修改值:", newData);const putRes = objectStore.put(newData);putRes.onsuccess = function (event) {getData(3);};}function getData(source) {console.log(source, "来源");// 检索数据const getTransaction = db.transaction(["customers"], "readonly");const getObjectStore = getTransaction.objectStore("customers");const getRequest = getObjectStore.get(1);getRequest.onsuccess = function (event) {const result = getRequest.result;console.log("Retrieved data:", result);// 关闭数据库连接db.close();};}</script></body>
</html>

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

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

相关文章

C++入门全集(4):类与对象【下】

一、再谈构造函数 1.1 构造函数体内赋值 我们知道&#xff0c;在创建对象时&#xff0c;编译器会自动调用构造函数给对象中的各个成员变量一个合适的初始值 class Date { public:Date(int year, int month, int day){_year year;_month month;_day day;}private:int _yea…

windows zip压缩报错includes characters that cannot be used in a compressed folder

Windows 用 zip 压缩文件夹时报错&#xff1a; <文件> cannot be compressed because includes characters that cannot be used in a compressed folder, such as <非法字符>. You should rename this file or directory.同 [1]。考虑用 python 批量检测非 ascii…

SOCKS55代理 VS Http代理,如何选择?

在使用IPFoxy全球代理时&#xff0c;选择 SOCKS55代理还是HTTP代理&#xff1f;IPFoxy代理可以SOCKS55、Http协议自主切换&#xff0c;但要怎么选择&#xff1f;为解决这个问题&#xff0c;得充分了解两种代理的工作原理和配置情况。 在这篇文章中&#xff0c;我们会简要介绍 …

我常用的大模型和Prompt有哪些?

常用的大模型及其对比 以前提到过&#xff0c;我们公司鼓励大家多使用GPT这样的大模型&#xff0c;一方面能够提高工作效率&#xff0c;一方面使用的越多&#xff0c;越了解&#xff0c;越有可能发现应该怎么将其跟我们公司的产品结合起来。 但是出于安全考虑&#xff0c;如果…

Synchronized 详解(一)

在C程序代码中我们可以利用操作系统提供的互斥锁来实现同步块的互斥访问及线程的阻塞及唤醒等工作。在Java中除了提供Lock API外还在语法层面上提供了synchronized关键字来实现互斥同步原语,本文将对synchronized关键字详细分析。 带着问题去理解Synchronized 提示 请带着这…

10、BossCms代码审计

1、任意文件上传 限制 复现 POST /system/extend/ueditor/php/controller.php?actionuploadfile&encodeutf-8 HTTP/1.1 Host: bosscms.com Content-Length: 761 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome…

为什么要学习三维GIS开发?从技术层面告诉你答案

大家都知道GIS开发属于GIS行业中就业薪资较高的岗位&#xff0c;并且测绘、遥感以及城规等相关专业的毕业生纷纷转行做webgis开发。 那么&#xff0c;今天小编从技术层面探讨一下&#xff0c;为什么建议大家不要仅仅停留在webgis&#xff0c;而要继续往前学习三维GIS开发&…

TSINGSEE青犀AI智能分析网关V4智慧油田安全生产监管方案

一、方案背景 随着科技的不断发展&#xff0c;视频监控技术在油田行业中得到了广泛应用。为了提高油田生产的安全性和效率&#xff0c;建设一套智能视频监控平台保障安全生产显得尤为重要。本方案采用先进的视频分析技术、物联网技术、云计算技术、大数据和人工智能技术&#…

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

JavaWeb Tomcat启动、部署、配置、集成IDEA

web服务器软件 服务器是安装了服务器软件的计算机&#xff0c;在web服务器软件中&#xff0c;可以部署web项目&#xff0c;让用户通过浏览器来访问这些项目。 Web服务器是一个应用程序&#xff08;软件&#xff09;&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序…

MATLAB读取txt文本数据及可视化指南

MATLAB读取txt文本数据的说明指南 目录 MATLAB读取txt文本数据的说明指南摘要1. 数据准备2. 读取数据3. 绘制图形4. 小结 摘要 在MATLAB中&#xff0c;读取txt文本格式文件数据是一项基本的操作&#xff0c;特别是在数据分析和可视化方面。本文将介绍如何使用MATLAB读取txt文本…

C++ 基础知识

一. 预备知识 1. C的编程方式 过程性语言 (结构化、自顶向下)、面向对象语言、泛型编程 (创建独立于类型的代码) 2. 创建源代码文件的技巧 扩展名&#xff1a;.cpp 二. 第一个程序 - HelloWorld main() 入口点 返回 int 标准库 iostream std: 标准库的缩写 Statement…

HarmonyOS-使用call事件拉起指定UIAbility到后台

使用call事件拉起指定UIAbility到后台 许多应用希望借助卡片的能力&#xff0c;实现和应用在前台时相同的功能。例如音乐卡片&#xff0c;卡片上提供播放、暂停等按钮&#xff0c;点击不同按钮将触发音乐应用的不同功能&#xff0c;进而提高用户的体验。在卡片中使用postCardA…

科技的成就(五十七)

535、Machine Learning "1959 年 7 月&#xff0c;塞缪尔首创 Machine Learning 一词。塞缪尔在“Some Studies in Machine Learning Using theGame of Checkers”一文中给 Machine Learning 下了个非正式定义&#xff1a;没有明确编程指令的情况下&#xff0c;能让计算机…

【js中的作用域】

理解 js中的作用我们可以分为三个部分 全局作用域函数作用域块级作用域 全局作用域 不在任何函数内部或者大括号中声明的变量,都是再全局作用域下,全局声明的变量可以在程序中的任何位置访问 函数作用域 函数作用域也叫局部作用域,如果一个变量声名在一个函数内部,那么它…

LSTM进行字符级文本生成(pytorch实现)

文章目录 基于pytorch的LSTM进行字符集文本生成前言一、数据集二、代码实现 1.到入库和LSTM进行模型构建2.数据预处理函数3.训练函数4.预测函数5.文本生成函数6.主函数完整代码总结 前言 本文介绍了机器学习中深度学习的内容使用pytorch构建LSTM模型进行字符级文本生成任务 一…

王者荣耀整蛊搭建直播新玩法/obs贴纸配置教程

最近很火的王者荣耀整蛊直播&#xff0c;相信很多玩王者的玩家也想开一个直播&#xff0c;但是看到这种直播娱乐效果很有意思也想搭建一个&#xff0c;这里梦哥给大家出了一期搭建的教程&#xff01; 进阶版视频教程&#xff1a; 这期的教程是进阶版新玩法升级&#xff0c;具体…

Vue3:使用 Composition API 不需要 Pinia

在 Vue.js 开发的动态环境中&#xff0c;在单个组件中处理复杂的业务逻辑可能会导致笨重的文件和维护噩梦。虽然 Pinia 提供集中式状态管理&#xff0c;但仅依赖它来处理复杂的业务逻辑可能会导致代码混乱。本文探讨了使用 Composition API 的替代方法&#xff0c;说明开发人员…

数据库表 索引

目录 一、索引的分类 1、按存储形式: 1&#xff09;B-TREE索引&#xff1a; 2&#xff09;位图索引&#xff1a; 3&#xff09;反向键索引&#xff1a; 4&#xff09;基于函数的索引&#xff1a; 2、按唯一性&#xff1a; 1&#xff09;唯一索引&#xff1a; 3、按列的个数…

代码随想录算法训练营第八天

344. 反转字符串 方法&#xff1a; 方法一&#xff1a; 直接用reverse函数 注意&#xff1a; 代码&#xff1a; class Solution { public:void reverseString(vector<char>& s) {return reverse(s.begin(), s.end());} };运行结果&#xff1a; 方法&#xff1…