用jQuery实现本地存储
- 要求:点击提交按钮,让用户输入的内容分别加入到表格对应的列表中
- 要求:点击每一行的删除按钮,能删除当前行
- 要求:刷新页面时能保留当前的页面效果(数据状态不会消失)
HTML结构
<div style="margin-bottom: 15px;">
<input type="text" id="username" placeholder="请输入姓名">
<input type="text" id="sex" placeholder="请输入性别">
<input type="text" id="age" placeholder="请输入年龄">
<input type="button" value="提交" id="btn">
</div>
<table border="1" width="540">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
初始化数据
var arr = [{
'username': '小红',
'sex': '女',
'age': 24
}, {
'username': '小蓝',
'sex': '男',
'age': 24
}]
localStorage.setItem('data', JSON.stringify(arr))
入口函数
$(function () {
}
按钮绑定点击事件
$('#btn').click(function () {
var obj = {
username: $('#username').val(),
sex: $('#sex').val(),
age: $('#age').val()
}
var data = getData()
data.push(obj)
setData(data)
randerData()
})
获取本地存储中的数据并把数据转成复杂的数据类型
function getData() {
return JSON.parse(localStorage.getItem('data')) || []
}
存储data中的数据
function setData(data) {
localStorage.setItem('data', JSON.stringify(data))
}
封装页面渲染函数
function randerData() {
$('tbody').empty()
var data = getData()
data.forEach(function (item, i) {
var tr = '<tr><td>' + item.username + '</td><td>' + item.sex + '</td><td>' + item.age + '</td><td><a href="javascript:;">删除</a></td></tr>'
$('tbody').append(tr)
})
}
randerData()
用事件委托给每个删除链接绑定点击删除事件
$('tbody').on('click', 'a', function () {
$(this).parents('tr').remove()
setData(data)
randerData()
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/690a4c3982e610a80d829bddabb230d3.jpeg#pic_center)