Html5本地存储-indexDB的使用（浏览器数据库-数据的增删查改）（雇员信息管理）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雇员信息管理</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form" autocomplete="off">
<fieldset style="margin-top: 50px">
<legend>雇员信息</legend>
<label for="id">雇员id</label><input type="text" id="id" placeholder="请输入雇员id" >
<label for="name">姓名</label><input type="text" id="name" placeholder="请输入雇员姓名">
<label for="department">部门</label><input type="text" id="department" placeholder="请输入雇员所属部门">
<label for="date">入职日期</label><input type="text" id="date" placeholder="请输入雇员入职日期">
<label for="position">职位</label><input type="text" id="position" placeholder="请输入雇员职位">
<label for="salary">薪资</label><input type="text" id="salary" placeholder="请输入雇员薪资">
<div style="margin-top: 10px">
<button type="button" onclick="insert()">插入</button>
<button type="button" onclick="select()">查看</button>
<button type="button" onclick="update()">更新</button>
<button type="button" onclick="del()">删除</button>
</div>
</fieldset>
<fieldset style="margin-top: 50px">
<legend>雇员列表</legend>
<table border="1">
<thead>
<th width="100">雇员id</th>
<th width="100">姓名</th>
<th width="100">部门</th>
<th width="100">入职日期</th>
<th width="100">职位</th>
<th width="100">薪资</th>
</thead>
<tbody id="content">
<tr>
<td>1</td>
<td>张三</td>
<td>开发部</td>
<td>2019/01/01</td>
<td>项目经理</td>
<td>20000</td>
</tr>
<tr><td>2</td>
<td>李四</td>
<td>开发部</td>
<td>2019/01/01</td>
<td>程序员</td>
<td>7000</td>
</tr>
</tbody>
</table>
</fieldset>
</div>
<script type="text/javascript">
//创建/打开数据库
//版本改为2后就不能改为1了（版本升级不能降级）
let request = indexedDB.open("employee",1);
//当数据库创建/打开成功的时候触发
let db;
request.onsuccess=function (event) {
//获取数据库对象
db = event.target.result;
alert("数据库创建成功");
}
//当创建/打开失败的时候触发error
request.onerror=function (event) {
alert("数据库创建失败");
}
//当数据库版本升级的时候触发
request.onupgradeneeded=function (event) {
// alert("数据库版本升级");
db = event.target.result;
if(!db.objectStoreNames.contains("stu")){
//创建对象仓库
let store = db.createObjectStore("stu",{keyPath:"id",autoIncrement:false});
//创建索引
store.createIndex("nameIndex","name",{unique:false});
store.createIndex("addIndex","addr",{unique:false});
}
// if(!db.objectStoreNames.contains("class")){
// db.createObjectStore("class",{keyPath:"id",autoIncrement:false});
// }
}
//新增
function insert() {
//开启一个事务
let tx = db.transaction(["stu"],"readwrite");
//获取对象仓库
let store = tx.objectStore("stu");
//新增
//构造对象
let id = document.getElementById("id").value;
let name = document.getElementById("name").value;
let department = document.getElementById("department").value;
let date = document.getElementById("date").value;
let position = document.getElementById("position").value;
let salary = document.getElementById("salary").value;
let data = {
id:id,
name:name,
department:department,
date:date,
position:position,
salary:salary
};
//执行数据操作（新增）
let addReq = store.add(data);
addReq.onsuccess=function (event) {
alert("新增成功");
}
addReq.onerror=function (event) {
alert("新增失败");
}
}
//修改（更新）
function update() {
//开启一个事务
let tx = db.transaction(["stu"],"readwrite");
//获取对象仓库
let store = tx.objectStore("stu");
//构造对象
let id = document.getElementById("id").value;
let name = document.getElementById("name").value;
let department = document.getElementById("department").value;
let date = document.getElementById("date").value;
let position = document.getElementById("position").value;
let salary = document.getElementById("salary").value;
let data = {
id:id,
name:name,
department:department,
date:date,
position:position,
salary:salary
};
//执行数据操作（根据主键更新记录）
let putReq = store.put(data);
putReq.onsuccess = function () {
alert("修改数据成功");
}
putReq.onerror = function () {
alert("修改数据失败");
}
}
//删除
function del() {
//开启一个事务
let tx = db.transaction(["stu"],"readwrite");
//获取对象仓库
let store = tx.objectStore("stu");
let id = document.getElementById("id").value;
//执行数据操作（根据主键删除数据）
let delReq = store.delete(id);
delReq.onsuccess = function () {
alert("删除数据成功");
}
delReq.onerror = function () {
alert("删除数据失败");
}
}
//查看
function select() {
//开启一个事务
let tx = db.transaction(["stu"],"readonly");
//获取对象仓库
let store = tx.objectStore("stu");
let content = document.getElementById("content");
//打开游标
let curReq = store.openCursor();
let html="";
curReq.onsuccess=function (event) {
console.log("游标开始查询");
//获取到打开的游标
let cursor = event.target.result;
if(cursor){
let obj = cursor.value;
// console.log(obj.id+" "+obj.name+" "+obj.addr+" "+obj.age);
html+="<tr><td>"+obj.id+"</td><td>"+obj.name
+"</td><td>"+obj.department+"</td><td>"+obj.date+"</td><td>"
+obj.position+"</td><td>"+obj.salary+"</td></tr>"
//继续查询下一条数据
cursor.continue();
}else{
console.log("游标结束查询");
}
content.innerHTML=html;
}
}
</script>
</body>
</html>
6489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
