IndexedDB入门

2024-01-29 19:04
文章标签 入门 indexeddb

本文主要是介绍IndexedDB入门,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

https://www.cnblogs.com/zhangzuwei/p/16574791.html

注意

1.删除表,创建表只能在数据库版本升级里面进行。

2.keyPath: key 要和表字段对应,而且格式要一样,不然不运行不报错。

3.使用 autoIncrement: true 代替 keyPath: key, 则不需要写关键字段。

<html>
<head>
<title>IndexedDB</title>
<style>
h1 { text-align:center; }
table { margin:auto; border-collapse:collapse; }
th, td { text-align:center; padding:10px; border:1px solid black; }
</style>
</head>
<body>
<h1>Customers</h1>
<p id="msg"></p>
<table id="table"></table>
<script>
if (!window.indexedDB) {msg.innerText = "Your browser doesn't support IndexedDB.";
} else {const customerData = [{ name: "Bill", age: 35, email: "bill@company.com" },{ name: "Donna", age: 32, email: "donna@home.org" },{ name: "Jenny", age: 23, email: "jenny@msn.com" },{ name: "Henry", age: 43, email: "Henry@outlook.com" },{ name: "Kaili", age: 53, email: "Kaili@outlook.com" }];var db;var request = window.indexedDB.open("MyTestDatabase", 1);request.onerror = function(event) {console.log(event);msg.innerText = event.target.error;};request.onupgradeneeded = function(event){db = event.target.result;if (db.objectStoreNames.contains('customers')){db.deleteObjectStore("customers");}var objectStore = db.createObjectStore("customers", { autoIncrement: true });objectStore.createIndex("name", "name", { unique: false });objectStore.createIndex("email", "email", { unique: true }); objectStore.transaction.oncomplete = function(event){var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");customerData.forEach(function(customer){customerObjectStore.add(customer);               });};};request.onsuccess = function(event){        var i = 1;var tr = document.createElement('tr');var th = document.createElement('th');th.textContent = 'id';tr.append(th);th = document.createElement('th');th.textContent = 'name';tr.append(th);th = document.createElement('th');th.textContent = 'age';tr.append(th);th = document.createElement('th');th.textContent = 'email';tr.append(th);table.append(tr);db = event.target.result;var objectStore = db.transaction("customers").objectStore("customers");        objectStore.openCursor().onsuccess = function(event){var cursor = event.target.result;            if (cursor) {tr = document.createElement('tr');var td = document.createElement('td');td.textContent = i;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.name;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.age;tr.append(td);td = document.createElement('td');td.textContent = cursor.value.email;tr.append(td);table.append(tr);cursor.continue();                i++;} else {console.log("No more cursor!");}};};    }
</script>
</body>
</html>

这篇关于IndexedDB入门的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/657884

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

数论入门整理(updating)

一、gcd lcm 基础中的基础,一般用来处理计算第一步什么的,分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题:

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

poj 2104 and hdu 2665 划分树模板入门题

题意: 给一个数组n(1e5)个数,给一个范围(fr, to, k),求这个范围中第k大的数。 解析: 划分树入门。 bing神的模板。 坑爹的地方是把-l 看成了-1........ 一直re。 代码: poj 2104: #include <iostream>#include <cstdio>#include <cstdlib>#include <al

MySQL-CRUD入门1

文章目录 认识配置文件client节点mysql节点mysqld节点 数据的添加(Create)添加一行数据添加多行数据两种添加数据的效率对比 数据的查询(Retrieve)全列查询指定列查询查询中带有表达式关于字面量关于as重命名 临时表引入distinct去重order by 排序关于NULL 认识配置文件 在我们的MySQL服务安装好了之后, 会有一个配置文件, 也就

音视频入门基础:WAV专题(10)——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础:WAV专题(6)——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道,通过FFprobe命令可以打印WAV音频文件每个packet(也称为数据包或多媒体包)的信息,这些信息包含该packet的pts、dts: 打印出来的“pts”实际是AVPacket结构体中的成员变量pts,是以AVStream->time_base为单位的显

C语言指针入门 《C语言非常道》

C语言指针入门 《C语言非常道》 作为一个程序员,我接触 C 语言有十年了。有的朋友让我推荐 C 语言的参考书,我不敢乱推荐,尤其是国内作者写的书,往往七拼八凑,漏洞百出。 但是,李忠老师的《C语言非常道》值得一读。对了,李老师有个官网,网址是: 李忠老师官网 最棒的是,有配套的教学视频,可以试看。 试看点这里 接下来言归正传,讲解指针。以下内容很多都参考了李忠老师的《C语言非

MySQL入门到精通

一、创建数据库 CREATE DATABASE 数据库名称; 如果数据库存在,则会提示报错。 二、选择数据库 USE 数据库名称; 三、创建数据表 CREATE TABLE 数据表名称; 四、MySQL数据类型 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串类型 4.1 数值类型 数值类型 类型大小用途INT4Bytes整数值FLOAT4By

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口int main(int argc, char *argv[]){// argc是命令行参数个数,argv是