能够实现基本的本地IndexDB的创建，增加数据，删除数据
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IndexedDB</title>
<style>
*{padding: 0;margin: 0;}
#container{
width: 800px;
margin: 50px auto;
border:1px solid red;
padding: 10px;
}
table{
width: 100%;
margin: auto;
border: 1px solid black;
}
thead{
border: 1px solid black
}
td{
width: 33.3%;
height: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<form>
<label>姓名</label>
<input type="text" placeholder="请输入你的姓名" id="add_name"/>
<label>年龄</label>
<input type="text" placeholder="请输入你的年龄" id="add_age"/>
<button id="add_btn">添加用户</button>
</form>
<br>
<form>
<label>主键值：</label>
<input type="text" placeholder="请输入你要删除的主键值" id="delete_primary_key"/>
<label>姓名</label>
<input type="text" placeholder="请输入你要删除的姓名" id="delete_name"/>
<button id="delete_btn">删除用户</button>
</form>
<br>
<table>
<thead>
<tr>
<td>主键</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody id="_tbody">
</tbody>
</table>
</div>
</body>
</html>
<script>
window.onload = function () {
//1.创建数据库，对象仓库，索引表
let dbName = 'DB3';//数据库名
let objStoreName = 'students';//表名
let version = 3;//版本号
let students = new Array();//学生表的信息
let request;
//创建索引数据库
creatIndexedDB(dbName, objStoreName, version);//填入三个参数数据库名，表名，版本号
function creatIndexedDB(dbName, objectStoreName, version) {
request = indexedDB.open(dbName, version);
//检查是否存在DB3这个数据库，有则打开数据库，没有则创建数据库
//打开数据库失败，onerror事件被触发
request.onerror = function (event) {//打开失败
console.log('open Error! fail to open database with' + event.target.message);
}
//打开数据库成功，onsuccess事件被触发
request.onsuccess = function () {
console.log("success open the database!");
console.log("数据库名：" + dbName + "，版本号：" + version);
}
//在新的数据库创建或数据库版本号被修改时，onupgradeneeeded事件被触发
request.onupgradeneeded = function (event) {
alert("version Change");
var db = event.target.result;//获取到的数据库
//在数据库下面创建对象空间
if (!db.objectStoreNames.contains("students")) {
var objStore = db.createObjectStore("students", {keyPath: 'id', autoIncrement: true})
console.log("对象仓库创建成功" + objStore);
//在对象仓库下面创建索引表
objStore.createIndex('nameIndex', 'name', {unique: false});
objStore.createIndex('ageIndex', 'age', {unique: false});
console.log('索引表创建成功');
}
}
}
// 添加数据
document.getElementById('add_btn').onclick = function () {//点击添加按钮触发
console.log("按钮点击成功");
let add_name = document.getElementById("add_name").value;
let add_age = document.getElementById('add_age').value;
let str = {name: add_name, age: add_age};
students.push(str);
if (add_name != "" && add_age != "") {
addData(dbName, objStoreName, students);//这里填入三个参数数据库名，表名，json数据
} else {
alert("姓名和年龄中不能留空！");
}
}
function addData(dbName, objStoreName, students) {
let openRequest = indexedDB.open(dbName, version);
openRequest.onsuccess = function (event) {
let db = event.target.result;
//创建事务
let transaction = db.transaction(objStoreName, 'readwrite');
//获取对象仓库
let objStore = transaction.objectStore(objStoreName);
//添加数据
objStore.add(students[0]);
// for (var i=0;i<students.data.length;i++){
// objStore.add(students.data[i]);
// alert("添加数据成功！！！");
// }
}
}
//显示数据
showData(dbName, objStoreName, version);
function showData(dbName, objStoreName, version) {
let openRequest = indexedDB.open(dbName, version);
openRequest.onerror = function () {
alert("打开数据库失败！！！");
}
openRequest.onsuccess = function (ev) {
//获取数据库
let db = ev.target.result;
//创建事务
let transaction = db.transaction(['students'], 'readwrite');
//获取对象仓库
let objStore = transaction.objectStore('students');
//通过游标的方式遍历数据
let cursorRequest = objStore.openCursor();
cursorRequest.onsuccess = function (event) {
let cursor = event.target.result;
let strHTML = "";
if (cursor) {
strHTML = strHTML + ('<tr>'
+ '<td>' + cursor.value.id + '</td>'
+ '<td style="width: 200px">' + cursor.value.name + '</td>'
+ '<td style="width: 180px">' + cursor.value.age + '</td>'
+ '</tr>');
cursor.continue();
}
document.getElementById('_tbody').innerHTML += strHTML;
}
}
}
document.getElementById("delete_btn").onclick = function () {
var primary_key = document.getElementById('delete_primary_key').value;
var primary_key = parseInt(primary_key);
console.log("删除按钮点击成功");
alert(primary_key);
if (primary_key != "") {
deleteData(dbName, objStoreName, primary_key);//这里填入三个参数数据库名，表名，输入的主键值
} else {
alert("主键值和姓名中不能留空！");
}
}
function deleteData(dbName, objStoreName, primary_key) {
let openRequest = indexedDB.open(dbName, version);
openRequest.onsuccess = function (event) {
let request = event.target.result.transaction(objStoreName, 'readwrite').objectStore(objStoreName);
// let db = event.target.result;
//
// //创建事务
// let transaction = db.transaction(objStoreName, 'readwrite');
//
// //获取对象仓库
// let objStore = transaction.objectStore(objStoreName);
//删除数据
// objStore.delete(primary_key);
let del = request.delete(primary_key);
del.onsuccess = function () {
alert("数据删除成功1" + typeof primary_key);
}
del.onerror = function () {
alert("该主键不存在");
}
}
}
}
</script>效果图：
说明：可以添加和删除用户。
最后，说一句，代码虽好，但不要全抄哦，要自己去理解，如果小博的文章对你有所帮助，欢迎点赞留言关注小博！！！????????????
