2024年jQuery电话簿(storage本地存储)_jq storage(1)，2024年最新大佬手把手教你如何仿写出大厂的APP-CSDN博客

本文链接：https://blog.csdn.net/2401_84975923/article/details/138796344

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<title>jQuery电话簿(storage本地存储)</title>
<style>

button.confirm-btn {
border-radius: 5px;
margin: 3px 0;
}

姓名
电话
地址
增加用户

    </tbody>
</table>
<script>

编号	姓名	电话	地址	操作

! function(window, document, $, undefined) {
// 创建一个电话本业务的对象
let TelBook = {
// 程序的入口，在外面执行这个程序只要调用入口文件即可
init() {
// 在入口文件中绑定所有事件（初始化事件）
this.initEvent();
// 不加this，调用全局
this.renderTable()
},
initEvent() {
$(‘.confirm-btn’).on(‘click’, {
obj: this
}, this.confirmBtnClick)
$(‘tbody’).on(‘click’, ‘.del-btn’, {
obj: this
}, this.onDelBtnClick)
$(‘tbody’).on(‘click’, ‘.update-btn’, {
obj: this
}, this.onUpdataBtnClick)
},
onUpdataBtnClick(e) {
let id = $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots(key => { if ($ (#${key}).length > 0) {
$KaTeX parse error: Expected 'EOF', got '#' at position 3: (`#̲$ {key}`).val(obj[key])
}
})
$(‘.confirm-btn’).html(‘修改用户’).attr(‘id’, id)
},
onDelBtnClick(e) {
let arr = e.data.obj.get();
let id = $(this).attr(‘uId’);
let index = arr.findIndex(item => item.id == id);
arr.splice(index, 1);
e.data.obj.save(arr);
e.data.obj.renderTable()
},
confirmBtnClick(e) {
let arr = e.data.obj.get();
let obj = {};
$(‘input’)
.each(function(index, item) {
obj[item.id] = $(item).val()
}).val(‘’)
if (this.id) {
obj.id = this.id;
arr = arr.map(item => {
if (item.id == this.id) {
item = obj
}
return item;
})
} else {
obj.id = Date.now();
arr.push(obj);
}
e.data.obj.save(arr);
e.data.obj.renderTable();
this.id = ‘’
},
renderTable() {

let arr = this.get();
let newArr = [];
$.each(arr, (index, item) => {
newArr.push(
`

${item.id} ${item.name} ${item.tel} ${item.address} 删除修改 ` ) }) $('tbody').html(newArr.join('')) }, // 读取webStorage get() { return JSON.parse(localStorage.getItem('userList')) || [] }, // 存储webStorage