index DB使用方法，学生成绩信息存储本地

indexDB是一个存放在服务器端的本地数据库，类似于NoSQL。

操作过程：

1、创建或打开数据库：indexedDB.open("mydb", 1);

2、创建事务：let tx = db.transaction(['students'], 'readwrite');

3、获取数据对象：let store = tx.objectStore("students");

3、添加数据：store.add(data);

4、查找和删除数据需要使用游标。

（1）打开游标：let getRq = store.openCursor()

（2）删除数据：cursor.delete()

举个栗子，这是一个学生成绩信息存储本地的功能。可以添加数据，删除数据，修改数据。

这是HTML部分，主要实现查看、添加、删除数据功能。

//主页面HTML部分
<body><h1>indexed Databases</h1><input type="button" value="创建数据库" onclick="createDB()"><input type="button" value="创建对象仓库" onclick="createObjectStore()"><fieldset><legend>学生成绩信息</legend><ul><li>学号:<input type="number" value="" name="" id="code" /></li><li>姓名:<input type="text" value="" name="" id="name" /></li><li>班级:<input type="text" value="" name="" id="classes" /></li><li>课程:<input type="text" value="" name="" id="course" /></li><li>生日:<input type="text" value="" name="" id="brith" /></li><li>成绩:<input type="text" value="" name="" id="grade" /></li></ul><input type="button" value="保存" onclick="save()"></fieldset><button onclick="searchAll('table')">查看所有</button><table id="table"><tr><td>学号</td><td>姓名</td><td>班级</td><td>课程</td><td>生日</td><td>成绩</td><td>操作</td></tr></table></body>

JS部分

<script>let dbReq, db;let name = document.getElementById("name");let code = document.getElementById("code");let classes = document.getElementById("classes");let course = document.getElementById("course");let brith = document.getElementById("brith");let grade = document.getElementById("grade");function createDB() {dbReq = indexedDB.open("mydb", 1); //创建或打开数据库//判断创建是否成功dbReq.onsuccess = function() {alert("创建或打开数据库成功");}dbReq.onerror = function() {alert("创建或打开数据库失败");}}//常见对象仓库function createObjectStore() {//版本更新dbReq = indexedDB.open("mydb", 2);dbReq.onupgradeneeded = function(e) {db = e.target.result;let store = db.createObjectStore("students", {"keyPath": "code","autoIncrement": true});db.close();}}function save() {//打开数据库dbReq = indexedDB.open("mydb");dbReq.onsuccess = function(e) { //获取数据库实例对象// alert("创建或打开数据库成功");db = e.target.result;//创建事务let tx = db.transaction(['students'], 'readwrite');//获取对象仓库,对象仓库的名称let store = tx.objectStore("students");//组装数据let data = {"code": code.value,"name": name.value,"classes": classes.value,"course": course.value,"brith": brith.value,"grade": grade.value};//向对像仓库插入数据store.add(data);alert('保存成功')db.close();}}//利用游标查找function searchAll() {const request = indexedDB.open('mydb')request.onsuccess = function(e) {db = e.target.resultlet tx = db.transaction(['students'], 'readonly')let store = tx.objectStore('students')//打开游标let getRq = store.openCursor()getRq.onsuccess = function(e) {var cursor = this.result// console.log(cursor)if (cursor) {let table = document.getElementById('table')table.innerHTML += '<tr>\n\<td>' + cursor.key + '</td>\n\<td>' + cursor.value.name + '</td>\n\<td>' + cursor.value.classes + '</td>\n\<td>' + cursor.value.course + '</td>\n\<td>' + cursor.value.brith + '</td>\n\<td>' + cursor.value.grade + '</td>\n\<td>' + '<a href="#" onclick="remove(' + cursor.key + ')">删除</a>&nbsp;&nbsp;<a href="./test.7.2.html?code="' + cursor.key + '" onclick="update(' + cursor.key + ')">修改</a></td></tr>'cursor.continue()} else {// console.log('游标结束');}}}}//删除功能function remove(ev) {console.log(ev);const request = indexedDB.open('mydb')request.onsuccess = function(e) {db = e.target.resultvar tx = db.transaction(['students'], 'readwrite')let store = tx.objectStore('students')var req = store.openCursor()req.onsuccess = function(e) {var cursor = this.result// console.log(cursor)if (cursor) {if (cursor.key == ev) {cursor.delete()alert("删除成功");return cursor}cursor.continue()}}db.close()}}</script>

差不多这个样子

这个是添加功能，建议单独写一个页面跳转的那种。

html部分

<fieldset><legend>学生成绩信息</legend><ul><li>姓名:<input type="text" value="" name="" id="name" /></li><li>班级:<input type="text" value="" name="" id="classes" /></li><li>课程:<input type="text" value="" name="" id="course" /></li><li>生日:<input type="text" value="" name="" id="brith" /></li><li>成绩:<input type="text" value="" name="" id="grade" /></li></ul><input type="button" value="更新" onclick="update()">
</fieldset>

js部分

<script>var code = location.search;code = code.slice(code.indexOf("=") + 1);// console.log(code);let dbReq, db;let name = document.getElementById("name");// let code = document.getElementById("code");let classes = document.getElementById("classes");let course = document.getElementById("course");let brith = document.getElementById("brith");let grade = document.getElementById("grade");function update() {const request = indexedDB.open('mydb')request.onsuccess = function(e) {db = e.target.resultvar tx = db.transaction(['students'], 'readwrite')let store = tx.objectStore('students')var req = store.openCursor()req.onsuccess = function(e) {var cursor = this.result// console.log(cursor)if (cursor) {var data = {id: 1,'code': cursor.key,'name': name.value,'classes': classes.value,'course': classes.value,'brith': brith.value,'grade': grade.value}// console.log(data)if (cursor.key == code) {cursor.update(data)alert('修改成功');window.location.href = "./test7.0.html"}cursor.continue()}db.close()}}}
</script>

本文章包含老师上课讲的内容，然后自己编写，不够完善。

index DB使用方法，学生成绩信息存储本地相关推荐

基于python+tkinter的学生成绩信息管理系统
基于python+tkinter的学生成绩信息管理系统系统设计 2.开发工具开发语言:python3.6.8 开发工具:JetBrains PyCharm 2019.1.2 x64 使用三方模块: ...
java录入学生信息_java实现学生成绩录入系统
本文为大家分享了java实现学生成绩录入系统,供大家参考,具体内容如下 1.学生类,包括学生的姓名和各科成绩 public class Score { public String name; publ ...
C语言编写学生成绩管理系统
文章链接:https://codemouse.online/archives/2020-06-04-16-07-48 需求用C语言编写学生成绩管理系统,要求该系统可对学生操作:添加和删除操作. 可 ...
R语言定量方法：回归，虚拟变量和交互项，假设检验:F 检验、AIC 和 BIC分析学生成绩数据带自测题
最近我们被客户要求撰写关于学生成绩的研究报告,包括一些图形和统计输出. 回归假设省略变量偏差如果真实模型包括X 1 和X 2 ,但我们忘记了X 2,那么 - 在某些情况下 - 对X的估计将会有偏差 ...
怎么利用计算机为学生成绩进行排名,使用excel为学生成绩排序的方法和步骤
在下面表格中学号和姓名等是用计算机录入并打印出来,老师只是手写填上考试成绩和排名,然后让打字员录入表格中.当然我也看到或听说过其他学校的学生成绩统计分数排名表.它是对学生成绩进行升序或降序的排列表.这 ...
学生成绩等级用c语言,C语言实现学生成绩等级划分的方法实例
C语言实现学生成绩等级划分的方法实例题目·:用if-else嵌套语句实现学生成绩等级查询要求:分为ABCD4个等级,100-90为A:90-70为B:70-60为C:60以下为D 思路: 1.先从 ...
html制作学生成绩表,学生成绩查询系统的制作方法——Excel篇
今天给大家分享一个学生成绩查询系统的制作方法,也是回答一位小伙伴的问题. 我们设计一个简单的模型,同类问题都可以套用这个模型. 话不多说,先上个效果图. 上图中,通过下拉菜单选中不同的姓名,调取不同的 ...
计算学生成绩的最高分、最低分和平均分（数组全是方法）
代码: 1 package com.mon10.day24; 2 3 import java.util.Scanner; 4 5 /** 6 * 类说明 :计算学生成绩的最高分.最低分和平均分 7 * ...
学生成绩管理系统（简易本地版）
学生成绩管理系统(简易本地版) 一.概述平台:Windows 10 ,Microsoft Visual Studio 2017 语言:C++,面向过程完成日期:2018/12/27 主要功能: 1 ...

index DB使用方法，学生成绩信息存储本地

index DB使用方法，学生成绩信息存储本地相关推荐

最新文章

热门文章