jQuery电话簿(storage本地存储)

人间小美味695

已于 2022-11-19 23:27:10 修改

阅读量1k

点赞数 4

分类专栏： # jQuery # JavaScript 文章标签： jquery html localStorage

于 2021-04-21 15:11:33 首次发布

本文链接：https://blog.csdn.net/cainiaoyihao_/article/details/115897408

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 7 订阅

订阅专栏

jQuery

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>jQuery电话簿(storage本地存储)</title>
    <style>
        button.confirm-btn {
            border-radius: 5px;
            margin: 3px 0;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" id='name'>姓名<br>
        <input type="text" id='tel'>电话<br>
        <input type="text" id='address'>地址<br>
        <button class="confirm-btn">增加用户</button>
    </div>
    <table border="1">
        <thead>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>电话</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </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 = $(this).attr('uId');
                    let arr = e.data.obj.get();
                    let obj = arr.find(item => item.id == id);
                    Object.keys(obj).forEach(key => {
                        if ($(`#${key}`).length > 0) {
                            $(`#${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(
                            `
                            <tr>
                                <td>${item.id}</td>
                                <td>${item.name}</td>
                                <td>${item.tel}</td>
                                <td>${item.address}</td>
                                <td>
                                    <button uId="${item.id}" class='del-btn'>删除</button>
                                    <button uId="${item.id}" class='update-btn'>修改</button>
                                </td>
                            </tr>
                            `
                        )
                    })
                    $('tbody').html(newArr.join(''))
                },
                // 读取webStorage
                get() {
                    return JSON.parse(localStorage.getItem('userList')) || []
                },
                // 存储webStorage
                save(arr) {
                    localStorage.setItem('userList', JSON.stringify(arr))
                }
            }
            TelBook.init()
        }(window, document, jQuery)
    </script>
    <script>
        console.log("%c ", 'margin-left:0px;padding:100px 100px;background-image: url("https://liujianwei695.gitee.io/minifile/images/officialAccount.jpg");background-size: 200px 200px;background-position: center;background-repeat: no-repeat;');
    </script>
</body>

</html>