html5 --- IDBDatabase创建对象存储和索引

代码如下:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> CRUD操作 </title><style type="text/css">table{width: 830px;border: 1px solid lightgrey;border-collapse: collapse;vertical-align: top;}td{padding: 5px;border:1px solid lightgrey;}tr{background: linear-gradient(to right, #f6f6f6, #fff);}tr:hover{background: linear-gradient(to right, #eee, #f6f6f6);}tbody{text-align:center;}</style>
</head>
<body><form id="bookForm">ISBN: <input id="isbn" name="isbn" type="text" size="40" />书名: <input id="name" name="name" type="text" size="40" /> <p>作者: <input id="author" name="author" type="text" size="40" />价格: <input id="price" name="price" type="number" min="10" max="200" step="0.1" /><p>内容简介: <input id="content" name="content" type="text" size="80" /><p><button onclick="add();" type="button">添加</button> <p>ISBN下限: <input id="isbnlower" name="isbnlower" type="text" size="30" />ISBN上限: <input id="isbnupper" name="isbnupper" type="text" size="30" /><button onclick="query();" type="button">查询</button></form>	<table><tr><th width="5%">ISBN</th><th>书名</th><th>内容简介</th><th width="6%">作者</th><th width="6%">价格</th><th width="7%">操作</th></tr><tbody id="bookTb"></tbody></table><script type="text/javascript">function createDb(event){idb = event.target.result;var storeName="books";if(idb.objectStoreNames.contains(storeName)){idb.deleteObjectStore(storeName);}var opt ={keyPath: "isbn",autoIncrement: false};var store = idb.createObjectStore(storeName, opt);store.createIndex("by_name","name", {unique: true});store.createIndex("by_content", "content");store.createIndex("by_author", "author");store.createIndex("by_price", "price");}var dbName="fkDb";var version = 2;function add(){var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readwrite");var booksStore = tx.objectStore("books");var book = {isbn: document.querySelector("#isbn").value,name: document.querySelector("#name").value,content: document.querySelector("#content").value,author: document.querySelector("#author").value,price: parseFloat(document.querySelector("#price").value),}var objectStoreRequest = booksStore.add(book);objectStoreRequest.onsuccess = function(event){alert("数据添加成功!");document.querySelector("#bookForm").reset();list();};}request.onerror = function(event){alert("数据库打开失败!");}request.onupgradeneeded = createDb;}function list(){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;// 针对books对象存储的只读事务var tx = idb.transaction("books", "readonly");var booksStore = tx.objectStore("books");// 获取全部图书var objectGetRequest = booksStore.getAll();objectGetRequest.onsuccess = function(event){var bookTb = document.querySelector("#bookTb");bookTb.innerHTML = "";var books = objectGetRequest.result;for(var i = 0; i < books.length; i ++){var row = bookTb.insertRow(i);var j = 0;for( var prop in books[i]){var cell = row.insertCell(j++);cell.innerHTML = books[i][prop];}var opCell = row.insertCell(5);opCell.innerHTML = "<button onclick='delBook(\"" +books[i]['isbn'] + "\");'>删除</button>";}};}request.onerror = function(event){alert("数据库打开失败!" + event);}request.onupgradeneeded = createDb;}function delBook(key){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readwrite");var booksStore = tx.objectStore("books");var objectDeleteRequest = booksStore.delete(key);objectDeleteRequest.onsuccess = function(event){alert("图书删除成功!");list();};}request.onerror = function(event){alert("数据库打开失败!" + event);}request.onupgradeneeded = createDb;}function query(){var dbName = "fkDb";var request = indexedDB.open(dbName, version);var idb;request.onsuccess = function(event){idb = request.result;var tx = idb.transaction("books", "readonly");var booksStore = tx.objectStore("books");var range = IDBKeyRange.bound(document.querySelector("#isbnlower").value,document.querySelector("#isbnupper").value);var objectQueryRequest = booksStore.openCursor(range);var bookTb = document.querySelector("#bookTb");bookTb.innerHTML = "";objectQueryRequest.onsuccess = function(event){var cursor = objectQueryRequest.result;if(cursor){var row = bookTb.insertRow(0);var j = 0;for(var prop in cursor.value){var cell = row.insertCell(j++);cell.innerHTML = cursor.value[prop];}var opCell = row.insertCell(5);opCell.innerHTML = "<button onclick='delBook(\"" +cursor.value['isbn'] + "\");'>删除</button>";cursor.continue();}};}request.onerror = function(event){alert("数据库打开失败!" + event);}request.onupgradeneeded = createDb;}list();</script>
</body>
</html>

效果如下:
在这里插入图片描述
打开控制台可以看见在IndexedDB里面创建了一个名为"fkDB"的数据库,里面有个books
在这里插入图片描述

参考《疯狂H5+CSS3+JS讲义》(第2版)P545~P559

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

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

相关文章

2019大疆PC软件开发笔试——开关和灯泡两个电路板

题目描述: 小A是一名DIY爱好者&#xff0c;经常制作一些有趣的东西。 今天&#xff0c;小A突然想要来做这样一个东西。小A现在有两块同样大小为nm&#xff0c;有nm块大小为11小电路板拼成的矩形电路板&#xff0c;假设叫做电路板A和电路板B。电路板A上每个小电路板都是一个开关…

2019高校微信小程序开发大赛获奖作品——《brain头脑智序》

目录 前言 交互流程说明图 我的任务 登录授权&#xff08;login&#xff09; 首页&#xff08;tababr分析&#xff09; 房间准备区&#xff08;preparing&#xff09; 便签编辑区 最终方案选择&#xff08;房主权限&#xff09; 会议报告页面&#xff08;report&#…

前端试题(三)

1. js继承的7种方式 回顾&#xff1a; 每个构造函数都有一个原型对象&#xff1b;原型对象都包含一个指向构造函数的指针&#xff1b;实例都包含一个指向原型对象的内部指针&#xff1b;一切皆为对象&#xff0c;只要是对象&#xff0c;就会有 proto 属性&#xff0c;该属性存…

享元模式 - 结构型模式

模式类型&#xff1a; Flyweight 享元模式 - 结构型模式 意图&#xff1a; The intent of this pattern is to use sharing to support a large number of objects that have part of their internal state in common where the other part of state can vary. 运用共享…

前端试题(四)

1. vue过滤器使用场景 2. v-on绑定多个方法 <p v-on"{click:dbClick,mousemove:MouseClick}"></p>一个事件绑定多个函数&#xff1a; <p click"one(),two()">点击</p>3. 在菜单结构不确定时&#xff0c;前端如何动态渲染 树形…

Mysql - 安装与配置

1、下载安装包 > https://www.mysql.com/downloads/ 2、双击安装&#xff0c;点击Install MySQL Products > 3、Skip 打钩&#xff0c;Next下一步 > 4、选择Server only&#xff1a;只选择安装服务端&#xff0c;根据个人喜好更改安装路径和数据保存路径…

廖雪峰git教程学习

廖雪峰git教程 git – Linus在2周内用c写的 1.1 基本概念 版本控制系统&#xff0c;追踪文本文件的改动&#xff0c;文件、视频等二进制文件则不可追踪&#xff08;微软的word也是二进制文件&#xff09;HEAD 指向当前分支&#xff0c;表示当前版本&#xff08;最新的提交&am…

前端后台管理系统梳理

再梳理一遍 一、商品后台管理系统 1. 功能 1.1 服务端情况 开启了CORS跨域支持需要授权的 API &#xff0c;必须在请求头中使用 Authorization 字段提供token 令牌&#xff08;axios拦截器&#xff09;baseUrl&#xff0c;接口地址&#xff1a;http://localhost:8888/api/…

构造器执行顺序

转载于:https://www.cnblogs.com/a6948076/p/8045801.html

Java08-java语法基础(七)构造方法

Java08-java语法基础&#xff08;七&#xff09;构造方法 一、构造方法 1、什么是构造方法&#xff1f; 构造方法&#xff08;类方法&#xff09;是一个方法名和类名相容的特殊的成员方法。 2、构造方法的作用&#xff1f; 当使用new关键字创建一个对象时&#xff0c;为新建对象…

安装mysql8.0.20,报错“找不到VCRUNTIME140_1.dll”

写在最前&#xff0c;指令集合 以管理员身份运行cmd mysql -uroot -p 【进入】mysql mysql > exit 【退出】 net stop mysql 【暂停】 net start mysql 【启动】 mysql -u root -p&#xff08;命令后输入临时密码&#xff0c;进入mysql&#xff09; ALTER USER USER() …

使用mockjs模拟数据

一、安装 简单粗暴 npm install mockjs 二、引入 CommonJS引入 let Mock require(mockjs) let userInfo Mock.mock({data: {responseCode: 200,responseMessage: success,userMessage: {name: "cname",email: "email",msg: cparagraph(2)}} })或者ES…

lodash源码分析之compact中的遍历

小时候&#xff0c; 乡愁是一枚小小的邮票&#xff0c; 我在这头&#xff0c; 母亲在那头。 长大后&#xff0c;乡愁是一张窄窄的船票&#xff0c; 我在这头&#xff0c; 新娘在那头。 后来啊&#xff0c; 乡愁是一方矮矮的坟墓&#xff0c; 我在外头&#xff0c; 母亲在里头。…

[HAOI2008]移动玩具

这又是一道神奇的搜索题。。。只要记录每种状态。。。然后暴力判断这种状态往后一步的情况。。。 广搜出最优解即可。。。 呆码&#xff1a; #include<iostream> #include<cstdio> #include<queue> #include<cstring> using namespace std;int dx[5]{0…

div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。

先上个图&#xff1a; 布局很简单&#xff0c;左右超过屏幕的部分自行滚动。 1. html <div class"ce-container"><div class"ce-leftBox">//左边的内容</div><div class"ce-rightBox">//右边的内容 </div…

javascript --- 利用Sortable实现一个可视化公式编辑器

Sortable的依赖引入和简单使用参见:https://blog.csdn.net/piano9425/article/details/90437182 先简单的介绍一下可视化公式编辑器的功能(样式没有调,毕竟每个人的需求都不一样): 首先会有2个需要计算的(我称为操作数)A_XiangRaoZuWenSheng和AYKZQ_CS,以及两个操作符ADD(加法…

使用uni-app搭建微信小程序

0 问题待解决 import { } 与否为什么要封装对齐问题每次重启项目&#xff0c;sitemap就会消失动态修改标题失效图片问题多多 &#xff1a;高度自适应 改成image固定高度&#xff0c;mode&#xff1a;aspectFill微信小程序文档b站视频链接后端接口文档 一、知识点 uni-app 是…

HttpTomcat

本节内容&#xff1a; Http协议Tomcat服务器下面开始的一系列内容都是JavaEE的内容&#xff0c;主要的内容见下图。JavaEE主要是做服务器端开发。 JavaEE全部规范&#xff1a;有13门技术&#xff0c;主要做web开发的需要学习servlet和jsp。其他技术&#xff0c;像EJB、 JNDI、J…

python---线程与进程

一 线程 1.1 概述 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流&#xff0c;一个进程中可以并发多个线程&#xff0c;每条线程并行执行不同的任务。 Threading用于提供线程相关…

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

今天用两种方法实现了动态的给select添加option的功能. 第一种是用jquery. // html <select id"drag-pointList"></select> // js $(#drag-pointList).children(option).remove(); // 清空之前的option let list res.data.list ; // res是ajax请…