目录
🏆学生id 如果id没有则开始为10001,如果有则为最后一个id的加一
🏆 读取是否有本地数据,若有则读取到数组中,没有则新建空数组
🏆获取input框的内容用value,用trim()去除前后空格
🏆为了避免手误删除,删除时要弹出一个确认框,然后判断是否同意
🏆locationstorage只能存储字符串类型的数据
无论什么类型存储到本地存储都会转换为字符串,无论是数值,数组还是对象
🏆学生id 如果id没有则开始为10001,如果有则为最后一个id的加一
const id = arr.length > 0 ? arr[arr.length - 1].id + 1 : 100011.如果arr.length > 0 ,
说明数组中有学生,则新学生的学号id为最后一个学生的id加1,
arr.length是arr数组的长度,数组最后一个元素下标为数组长度减一arr.length-1,
所以最后一个元素为arr[arr.length - 1],
由于元素为对象,取得对象的属性为对象.属性名,
所以最后一个元素的id为arr[arr.length - 1].id ,新学生的id为arr[arr.length - 1].id + 1
2.如果arr.length为0,则学生为第一个学生,给他起始的第一个学号10001
🏆 读取是否有本地数据,若有则读取到数组中,没有则新建空数组
const arr =JSON.parse(localStorage.getItem('arr'))|| []
如果或符号左边有内容则为true,arr等于或左边内容
若果或符号左边无内容,则为false,由于短路运算,arr直接等于右边
🏆获取input框的内容用value,用trim()去除前后空格
const uname = document.querySelector('.uname').value.trim()由于input为单标签,所以内容在value属性里面
trim()方法可以去除字符串前后的空格
**
trim()**方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR 等）。
🏆数组的map和join方法组合使用,渲染页面
const newData = data.map(function (item, i) {
return `
<tr>
<td>${item.id}</td>
<td>${item.uname}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>${item.salary}</td>
<td>${item.city}</td>
<td> <a href="">删除</a></td>
</tr>
`
})
tbody.innerHTML = newData.join('')注意:
数组的map方法,返回值是处理后新的数组,而数组中的元素之间是用逗号隔开的,
如果直接放在tbody.innerhtml中,会出现逗号
(出现这个bug我找了好久,还以为是html部分里哪里多写了逗号),
所以我们要使用join方法括号中间加引号表示数组之间的连接符为空
🏆判断是否有空字符
如果其中一个为空则弹出警告,注意用return表示不执行下面的代码(如果下面有代码的话)
if (uname === '' || age === '' || salary === '') return alert('请输入完整信息')🏆为了避免手误删除,删除时要弹出一个确认框,然后判断是否同意
if (confirm("确定要删除吗?")) {
arr.splice(e.target.dataset.i, 1)
// 录入本地数据
inLocal(arr)
}如果点击确定则confirm返回true,点击取消则返回false
正好利用这个逻辑值放入if的判断条件中,来节约代码量,一句两用
(在写代码中这种情况还有不少,比如利用全选框是否勾选的布尔值直接赋给所有的单选框的
checked,来达到一点击全选框,所有单选框都选的效果)