pink老师-本地存储不丢失

最新推荐文章于 2024-09-24 10:00:08 发布

水调歌头.

最新推荐文章于 2024-09-24 10:00:08 发布

阅读量184

点赞数 3

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_73042271/article/details/142311968

版权

pink老师apis的综合案例,页面刷新表单不丢失数据

主要是本地存储localStorage及表单内数据的增加和删除

基本框架

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>学生就业统计表</h1>
  <form action="" class="info">
    <input type="text" name="name" class="name" placeholder="姓名">
    <input type="text" name="age" class="age" placeholder="年龄">
    <input type="text" name="salary" class="salary" placeholder="薪资">
    <select name="gender" class="gender" id="">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city" id="">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="南昌">南昌</option>
      <option value="深圳">深圳</option>
    </select>
    <button class="add">添加</button>
  </form>
  <div class="num">共有效数据0条</div>
  <table>
    <thead>
      <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>薪资</td>
        <td>就业城市</td>
        <td>录入时间</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <!-- <td></td>
      <td>肖战</td>
      <td>18</td>
      <td>男</td>
      <td>100w</td>
      <td>北京</td>
      <td>date</td>
      <td><a href="javascript:">删除</a></td> -->
    </tbody>
  </table>
</body>

</html>

style

<style>
  /* 全局 */
  * {
    padding: 0;
    margin: 0;
  }

  body {
    width: 800px;
    margin: 50px auto;
  }



  /* 第一部分(标题) */
  h1 {
    margin-bottom: 30px;
    text-align: center;
  }

  /* 第二部分(表单+数据量)  */
  .info {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
  }

  .add {
    background-color: #73c2db;
    width: 65px;
    height: 30px;
    border: #73c2db;
  }

  input {
    outline: none;
  }

  .num {
    height: 35px;
    text-align: right;
    padding-right: 10px;
    line-height: 35px;
    font-size: large;
    background-color: #f3f3f3;
  }

  /* 第三部分(表格) */
  table,
  tr,
  td {
    border-collapse: collapse;
    border: 1px solid #f3f3f3;
  }

  table {
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }

  thead {
    font-weight: bold;
    height: 50px;
    background-color: #f3f3f3;
  }

  tbody tr {
    height: 40px;
  }

  a {
    display: block;
    width: 60px;
    margin: auto;
    text-decoration: none;
    color: black;
    background-color: orange;
    cursor: pointer;
  }
</style>

script

  <script>
    // 参考数据
    // const initData = [{
    //   Id: 1,
    //   name: '肖战',
    //   age: 20,
    //   gender: '男',
    //   salary: '2w',
    //   city: '北京',
    //   time: new Date().toLocaleString()
    // }]
    // localStorage.setItem('data', JSON.stringify(initData))

    // 1.渲染业务
    // 1.1 先读取本地存储的数据
    // (1).本地存储有数据则记得转换为对象然后存储到变量里面,后期用于渲染页面
    // (2).如果没有数据,则用空数组来代替
    const arr = JSON.parse(localStorage.getItem('data')) || []
    // 1.2 利用map和jion方法渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      // (1). 利用map遍历数组,返回对应 tr的数组
      const trArr = arr.map(function (ele, index) {
        return `
      <tr>
        <td>${ele.id}</td>
        <td>${ele.name}</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>
        `
      })
      // console.log(trArr)
      // (2).把数组转换为字符串jion
      // (3).把生成的字符串追加给tbody
      tbody.innerHTML = trArr.join('')
      // 显示共有几条数据
      document.querySelector('.num').innerHTML = `共有效数据${arr.length}条`
    }
    // render
    // 2.新增业务
    const info = document.querySelector('.info')
    const name = document.querySelector('.name')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    // 2.1 form表单注册提交事件,阻止默认行为
    info.addEventListener('submit', function (e) {
      e.preventDefault()
      // 2.2 非空判断
      if (!name.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 2.3给arr数组追加对象,里面存储表单获取过来的数据
      arr.push({
        id: arr.length === 0 ? 1 : arr[arr.length - 1].id + 1,
        name: name.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      // 2.4 渲染页面和重置表单(reset())
      render()
      this.reset()
      // 2.5 把数组重新存入本地存储里面.记得转换为JSON字符串
      localStorage.setItem('data', JSON.stringify(arr))
    })
    // 3.删除业务
    // 3.1 采用事件委托形式 给tbody注册点击事件
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 3.2 得到当前点击的索引号.渲染数据的时候,动态给a链接添加自定义属性 例如 data-id="0"
        // 确认框确认是否删除
        if (confirm('您确定要删除这条数据吗?')) {
          //  3.3 根据索引号,利用splice删除这条数据
          arr.splice(e.target.dataset.id, 1)
          // 3.4 重新渲染页面
          render()
          // 3.5 把最新arr数组存入本地存储
          localStorage.setItem('data', JSON.stringify(arr))
        }
      }
    })




  </script>