0
点赞
收藏
分享

微信扫一扫

HTML5本地存储IndexDB学习之入门篇

钟罗敏 2022-02-18 阅读 35


能够实现基本的本地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>

效果图:

HTML5本地存储IndexDB学习之入门篇_html

说明:可以添加和删除用户。

最后,说一句,代码虽好,但不要全抄哦,要自己去理解,如果小博的文章对你有所帮助,欢迎点赞留言关注小博!!!????????????



举报

相关推荐

0 条评论