js localStorage本地存储json对象并追加数据
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
记录一下
localStorage的更过相关知识可以去:http://www.w3school.com.cn/html5/html_5_webstorage.asp
这里主要是讲 localStorage存储对象的时候追加数据并不会覆盖原有的数据,下面写了个小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
<title></title>
<style>
table{
width: 300px;
border: 1px #000 solid;
}
td,th{
border: 1px #000 solid;
}
</style>
</head>
<body>
姓名:<input type="text" class="name" placeholder="姓名"><br>
年龄:<input type="text" class="age" placeholder="年龄"><br>
性别:<input type="text" class="sex" placeholder="性别"><br><br>
<button class="top" onclick="btn()">提交</button>
<hr>
<table>
<caption>学生信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody class="tt">
</tbody>
</table>
</body>
<script type="text/javascript">
// localStorage.removeItem('data'); //清除本地存储
var jsonData = JSON.parse(localStorage.getItem('data'));
console.log(jsonData);
if(!jsonData){
jsonData = [];
}
else{
// 初始化
show();
}
function btn(){
if(!$(".name").val() || !$(".age").val() || !$(".sex").val()){
alert("数据不能有空档");
}
else{
jsonData.push({
name:$(".name").val(),
age:$(".age").val(),
sex:$(".sex").val()
});
console.log(jsonData);
$(".name").val("");
$(".age").val("");
$(".sex").val("");
localStorage.setItem('data',JSON.stringify(jsonData));
$(".tt").empty();
show();
}
}
// DOM数据到表格上
function show(){
for(key in jsonData){
$(".tt").append(`
<tr>
<td>${jsonData[key].name}</td>
<td>${jsonData[key].age}</td>
<td>${jsonData[key].sex}</td>
</tr>
`);
}
}
</script>
</html>
效果图如下
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)