localStorage实现本地信息存储

半旧夜夏

于 2024-09-29 02:11:11 发布

阅读量409

点赞数 11

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_64972409/article/details/142624970

版权

基于HTML,CSS,JS代码，利用localStorage本地存储实现学生信息添加的综合小案列

效果图：

本地存储格式：

HTML代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
</head>

<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="name" placeholder="姓名">
        年龄: <input type="text" class="age" name="age" placeholder="年龄">
        性别:
        <select class="gender" name="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资: <input type="text" class="salary" name="salary" placeholder="薪资">
        就业城市:
        <select class="city" name="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>
    <h1>学生就业统计表</h1>
    <div class="num">
        <p>共有数据<span>0</span>条</p>
    </div>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

</body>

</html>

CSS代码：

* {
    /* 外边距 */
    margin: 0;
    /* 内边距 */
    padding: 0;
}

h1 {
    /* 使元素内的文本居中对齐 */
    text-align: center;
    margin: 20px 0;
}

.num {
    width: 800px;
    margin: 10px auto;
}

.num p {
    text-align: right;
}

.num p span {
    margin: auto 3px;
    color: red;
}

.info {
    width: 900px;
    margin: 50px auto;
    text-align: center;
}

table {
    width: 800px;
    margin: 10px auto;
    border-collapse: collapse;
    color: #004085;
}

th {
    padding: 10px;
    background-color: #cfe5ff;
    font-size: 20px;
    font-weight: 400;
}

th,
td {
    border: #b8daff solid 1px;
}

td {
    padding: 10px;
    text-align: center;
    color: #666;
    font-size: 16px;
}

tbody tr:hover {
    background-color: #e1ecf8;
}

a {
    /* 先清楚超链接下划线 */
    text-decoration: none;
    color: #721c24;
}

.info input,
.info select {
    width: 80px;
    height: 27px;
    /* 用于移除元素在获得焦点（例如通过点击或键盘导航）时的轮廓线 */
    outline: none;
    border: #b8daff solid 2px;
    border-radius: 5px;
    /* margin-left: 5px;
    /* margin-right: 15px; */
    padding-left: 5px;
    margin-right: 15px;
    /* 元素的总宽度和总高度包括了 border 和 padding */
    box-sizing: border-box;
}

.info button {
    width: 60px;
    height: 27px;
    background-color: #004085;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    border: 0;
    outline: none;
}

JS代码：

// 0.先初始化数据
// const initData = [
//     {
//         stuId: 1001,
//         uname: '欧阳霸天',
//         age: 19,
//         gender: '男',
//         salary: '20000',
//         city: '上海',
//         time: '2019-08-08'
//     }
// ]
//存放到本地存储
// localStorage.setItem('data', JSON.stringify(initData))

// 1.先获取元素
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const gender = document.querySelector('.gender')
const salary = document.querySelector('.salary')
const city = document.querySelector('.city')

// 2.从本地存储获取元素
const arr = JSON.parse(localStorage.getItem('data')) || []
console.log(arr);

const tbody = document.querySelector('tbody')
// 3.声明渲染函数
function render() {
    //格式化数据
    const trArr = arr.map(function (ele, index) {
        return `
        <tr>
                <td>${ele.stuId}</td>
                <td>${ele.uname}</td>
                <td>${ele.age}</td>
                <td>${ele.gender}</td>
                <td>${ele.salary}</td>
                <td>${ele.city}</td>
                <td>${ele.time}</td>
                <td>
                    <a href="javascript:" data-id=${index}>删除</a>
                </td>
            </tr>
        `
    })
    //将数组转为字符串
    tbody.innerHTML = trArr.join('')
    //统计总数
    document.querySelector('.num span').innerHTML = arr.length
}
render()

// 4.添加事件
info.addEventListener('submit', function (e) {
    // 阻止默认行为
    e.preventDefault()
    // 判断数据为空
    if (!uname.value || !age.value || !salary.value) {
        return alert('数据不能为空')
    }
    // 向数组里面添加元素
    arr.push(
        {
            stuId: arr.length + 1,
            uname: uname.value,
            age: age.value,
            gender: gender.value,
            salary: salary.value,
            city: city.value,
            time: new Date().toLocaleDateString()
        }
    )
    // 渲染数据
    render()
    // 清空表单填写数据
    this.reset()
    // 将数据保存到本地存储
    localStorage.setItem('data', JSON.stringify(arr))
})

// 5.删除事件
//采用事件委托,给tbody注册点击事件
tbody.addEventListener('click', function (e) {
    //判断点击是否为删除
    if (e.target.tagName === 'A') {
        //获取点击链接的索引号
        const index = e.target.dataset.id
        console.log(index);
        if (confirm('确定删除吗?')) {
            //删除数组对应元素
            arr.splice(index, 1)
            render()
            //更新本地存储
            localStorage.setItem('data', JSON.stringify(arr))
        }
    }
})