为什么我这个LocalStorage数据无法正常显示？
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>执勤队录入</title>
</head>
<body>
<h1>执勤队录入</h1>
<a href="files\jiaru.html">
<button>加入执勤队</button>
</a>
<br>
<a href="files\shixi.html">
<button>新增实习</button>
</a>
<br>
<a href="files\zhuangzheng.html">
<button>新增转正</button>
</a>
<br>
<a href="files\tichu.html">
<button>踢出队员</button>
</a>
<br>
<a href="files\chakan.html">
<button>查看队员</button>
</a>
</body>
</html>
jiaru.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>加入执勤队</title>
</head>
<body>
<h1>加入执勤队</h1>
<h2>请填写以下信息</h2>
班级：<input type="text" placeholder="请填写班级" id="jiaru_class">
姓名：<input type="text" placeholder="请填写姓名" id="jiaru_name">
<br>
<script src="index.js"></script>
<input type="submit" onclick="JiaRu()">
<br>
<a href="javascript:history.back(-1)">
<button>返回</button> <!--返回键-->
</a>
</body>
</html>
shixi.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新增实习</title>
</head>
<body>
<h1>新增实习</h1>
<h2>请填写以下信息</h2>
实习队员班级：<input type="text" id="shixi_duiyuan_class" placeholder="请输入实习班级">
实习队员姓名：<input type="text" id="shixi_duiyuan_name" placeholder="请输入实习姓名">
<br>
导师班级：<input type="text" id="shixi_daoshi_class" placeholder="请输入导师班级">
导师姓名：<input type="text" id="shixi_daoshi_name" placeholder="请输入导师姓名">
<br>
<script src="index.js"></script>
<input type="submit" onclick="ShiXi()">
<br>
<a href="javascript:history.back(-1)">
<button>返回</button> <!--返回键-->
</a>
</body>
</html>
zhuangzheng.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新增转正</title>
</head>
<body>
<h1>新增转正</h1>
<h2>请输入以下信息</h2>
导师班级：<input type="text" placeholder="请输入导师班级" id="zhuangzheng_daoshi_class">
<br>
导师姓名：<input type="text" placeholder="请输入导师姓名" id="zhuangzheng_daoshi_name">
<br>
实习班级：<input type="text" placeholder="请输入实习班级" id="zhuangzheng_shixi_class">
<br>
实习姓名：<input type="text" placeholder="请输入实习姓名" id="zhuangzheng_shixi_name">
<br>
<script src="index.js"></script>
<input type="submit" onclick="ZhuangZheng()">
<br>
<a href="javascript:history.back(-1)">
<button>返回</button> <!--返回键-->
</a>
</body>
</html>
tichu.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>踢出队员</title>
</head>
<body>
<h1>踢出队员</h1>
<h2>请输入以下信息</h2>
班级：<input type="text" placeholder="请填写班级" id="tichu_class">
姓名：<input type="text" placeholder="请填写姓名" id="tichu_name">
<br>
<script src="index.js"></script>
<input type="submit" onclick="TiChu()">
<br>
<a href="javascript:history.back(-1)">
<button>返回</button> <!--返回键-->
</a>
</body>
</html>
index.js
/*
JavaScript函数
*/
//加入执勤队
var dates = [];
if(localStorage.getItem("data")){
dates = JSON.parse(localStorage.getItem("data")); // 把json数据转为js对象
}else{
localStorage.setItem("data",JSON.stringify(dates));
}
function JiaRu()
{
dates.push({
class:jiaru_class,
name:jiaru_name,
state:"未实习",
daoshi_class:null,
daoshi_name:null
});
jiaru_class = null;
jiaru_name = null;
localStorage.data = JSON.stringify(dates);
alert('加入成功！');
}
//添加实习
function ShiXi()
{
index = dates.indexOf({
class:shixi_duiyuan_class,
name:shixi_duiyuan_name,
state:"未实习",
daoshi_class:null,
daoshi_name:null
})
dates[index] = {
class:shixi_duiyuan_class,
name:shixi_duiyuan_name,
state:"未转正",
daoshi_class:shixi_daoshi_class,
daoshi_name:shixi_daoshi_name
}
shixi_daoshi_class = null;
shixi_daoshi_name = null;
shixi_duiyuan_class = null;
shixi_duiyuan_name = null;
localStorage.data = JSON.stringify(dates);
alert('修改成功！');
}
//转正队员
function ZhuangZheng()
{
index = dates.indexOf({
class:zhuangzheng_duiyuan_class,
name:zhuangzheng_daoshi_name,
state:"未转正",
daoshi_class:zhuangzheng_daoshi_class,
daoshi_name:zhuangzheng_daoshi_name
})
dates[index] = {
class:zhuangzheng_duiyuan_class,
name:zhuangzheng_daoshi_name,
state:"已转正",
daoshi_class:null,
daoshi_name:null
}
zhuangzheng_daoshi_class = null;
zhuangzheng_daoshi_name = null;
zhuangzheng_duiyuan_class = null;
zhuangzheng_duiyuan_name = null;
localStorage.data = JSON.stringify(dates);
alert('修改成功！');
}
//踢出队员
function TiChu()
{
index = dates.indexOf({
class:tichu_class,
name:tichu_name,
state:"已转正",
daoshi_class:null,
daoshi_name:null
})
dates.splice(index);
tichu_class = null;
tichu_name = null
localStorage.data = JSON.stringify(dates);
}
//查看队员
function ChaKan(){
var str = "";
dates.forEach(function(item){// 遍历学生数据数组,每一个学生的数据都要生成一个tr行
str +="<tr><td>"+item.class+"</td><td>"+item.name+"</td><td>"+item.state+"</td><td>"+item.daoshi_class+"</td><td>",item.daoshi_name,"</td></tr>"
});
tbody.innerHTML = str; // 把tr渲染到tbody元素。
}
/*
JavaScript变量
*/
//jiaru.html
var jiaru_class = JSON.parse(document.getElementById('jiaru_class').textContent);
var jiaru_name = JSON.parse(document.getElementById('jiaru_name').textContent);
//shixi.html
var shixi_duiyuan_class = JSON.parse(document.getElementById('shixi_duiyuan_class').textContent);
var shixi_duiyuan_name = JSON.parse(document.getElementById('shixi_duiyuan_name').textContent);
var shixi_daoshi_class = JSON.parse(document.getElementById('shixi_daoshi_class').textContent);
var shixi_daoshi_name = JSON.parse(document.getElementById('shixi_daoshi_name').textContent);
//zhuangzheng.html
var zhuangzheng_daoshi_class = JSON.parse(document.getElementById('zhuangzheng_daoshi_class').textContent);
var zhuangzheng_daoshi_name = JSON.parse(document.getElementById('zhuangzheng_daoshi_name').textContent);
var zhuangzheng_duiyuan_class = JSON.parse(document.getElementById('zhuangzheng_duiyuan_class').textContent);
var zhuangzheng_duiyuan_name = JSON.parse(document.getElementById('zhuangzheng_duiyuan_name').textContent);
//tichu.html
var tichu_class = JSON.parse(document.getElementById('tichu_class').textContent);
var tichu_name = JSON.parse(document.getElementById('tichu_name').textContent);
问题图片
工作目录
index.html
files
┌ jiaru.html
├ shixi.html
├ zhuangzheng.html
├ tichu.html
├ chakan.html
└ index.js
望解答！谢谢！
