H5做indexedDB存储（增删查）

最新推荐文章于 2024-04-29 17:32:19 发布

L＆wy

最新推荐文章于 2024-04-29 17:32:19 发布

阅读量183

点赞数

分类专栏： H5高级

本文链接：https://blog.csdn.net/weixin_44719554/article/details/106490725

版权

H5高级专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>

<body>
<table border="1" style="width:100%;">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tbody id="SHuos">
</tbody>
</table>
姓名： <input type="text" id="name" />
<br> 年纪：
<input type="text" id="age" /><br>
<input type="button" value="保存" οnclick="Add()" />
<script>
window.onload = function() {
indata();
}
</script>

<script>
var db;
function indata() {
//判断浏览器是否支持
if (window.indexedDB) {
//打开数据库
var request = window.indexedDB.open("Lwy", 1);
//成功事件
request.onsuccess = function() {
console.log("打开成功");
//获取数据库对象
db = request.result;
//判断表是否存在
if (db.objectStoreNames.contains("Tablea")) {
console.log("Tablea存在");
//查询
SelectAll(db);
} else {
console.log("不存在");
}
}
//打开失败
request.onerror = function() {
console.log("打开失败");
}
//升级
request.onupgradeneeded = function() {
console.log("数据库升级成功");
//获取数据库对象
db = request.result;
//判断表是否存在
if (db.objectStoreNames.contains("Tablea")) {
console.log("表存在")
} else {
var objectStore = db.createObjectStore("Tablea", {
keyPath: "Id",
autoIncrement: true
})
//创建索引
objectStore.createIndex("name", "name", {
unique: false
})
//创建索引
objectStore.createIndex("age", "age", {
unique: false
})
}
}
}

}
//查询所有
var html = "";
function SelectAll(db) {
html = "";
var req = db.transaction("Tablea").objectStore("Tablea").openCursor();
req.onsuccess = function(e) {
var result = e.target.result;
if (result) {
html += "<tr>";
html += "<td>" + result.key + "</td>"
html += "<td>" + result.value.name + "</td>"
html += "<td>" + result.value.age + "</td>"
html += "<td><input type='button' value='删除' οnclick='Btn_delete(" + result.key + ")'/></td>"
html += "</tr>";
//继续读取
result.continue();
} else {
console.log("没有更多了！显示")
var tbody = document.getElementById("SHuos");
tbody.innerHTML = html;
}
}
}
//删除
function Btn_delete(id) {
if (confirm("是否删除")) {
var req = db.transaction("Tablea", "readwrite").objectStore("Tablea").delete(id);
//写入成功事件
req.onsuccess = function() {
console.log("删除成功");

//重新展示
indata();
}
req.onerror = function() {
console.log("删除失败")

}

}
</script>

<script>
function Add() {
//判断浏览器是否支持
if (window.indexedDB) {
//打开数据库
var request = window.indexedDB.open("Lwy", 1);
//成功事件
request.onsuccess = function() {
console.log("打开成功");
//获取数据库对象
db = request.result;
//判断表是否存在
if (db.objectStoreNames.contains("Tablea")) {
console.log("Tablea存在");
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
//指明操作
var req = db.transaction(["Tablea"], "readwrite").objectStore("Tablea").add({
name: name,
age: age,

})
//写入成功事件
req.onsuccess = function() {
console.log("写入成功");
html = "";
//重新展示
indata();
}
req.onerror = function() {
console.log("写入失败")

}

} else {
console.log("不存在");
}

}
//打开失败
request.onerror = function() {
console.log("打开失败");
}

//升级
request.onupgradeneeded = function() {
console.log("数据库升级成功");
//获取数据库对象
db = request.result;
//判断表是否存在
if (db.objectStoreNames.contains("Tablea")) {
console.log("表存在")

} else {
var objectStore = db.createObjectStore("Tablea", {
keyPath: "Id",
autoIncrement: true
})
//创建索引
objectStore.createIndex("name", "name", {
unique: false
})
//创建索引
objectStore.createIndex("age", "age", {
unique: false
})
}

}

}
</script>
</body>

</html>

L＆wy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5做indexedDB存储（增删查）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title></head><body> <table bord...
复制链接

扫一扫