作者:Jessica_猪猪到_697 | 来源:互联网 | 2023-07-12 14:22
原标题:用jQuery实现本地存储
用jQuery实现本地存储
- 要求:点击提交按钮,让用户输入的内容分别加入到表格对应的列表中
- 要求:点击每一行的删除按钮,能删除当前行
- 要求:刷新页面时能保留当前的页面效果(数据状态不会消失)
HTML结构
姓名 |
性别 |
年龄 |
操作 |
&lwww.yii666.comt;/tbody>
初始化数据
var arr = [{
'username': '小红',
'sex': '女',
文章来源地址36202.html '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)
文章来源站点https://www.yii666.com/ setData(data)
randerData()
})
获取本地存储中的数据并把数据转成复杂的数据类型
function getData() {
return JSON.parse(localStorage.getItem('data')) || []
}
存储data中的数据
function setData(data) {
localStorage.setItem('data', JSON.stringify(data))
}
封装页面渲染函数
function randerData() {
文章来源地址36202.html $('tbody').empty()
var data = getData()
www.yii666.com
data.forEach(function (item, i) {
var tr = '' + item.username + ' | ' + item.sex + ' | ' + item.age + ' | 删除 |
'
$('tbody').append(tr)
})
}
randerData()
用事件委托给每个删除链接绑定点击删除事件
$('tbody').on('click', 'a', function () {
$(this).parents('tr').remove()
setData(data)
randerData()
})
来源于:用jQuery实现本地存储