js本地存储中localStorage的使用案例

最新推荐文章于 2024-09-12 13:42:17 发布

清酒独酌

最新推荐文章于 2024-09-12 13:42:17 发布

阅读量966

点赞数 1

分类专栏： javascript 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121515034

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

<style>
    div {
      text-align: center;
    }

    table {
      width: 640px;
      border: 1px solid gray;
      border-collapse: collapse;
      margin: 50px auto;
    }

    thead tr {
      background: #ccc;
    }

    th,
    td {
      width: 160px;
      line-height: 35px;
      border: 1px solid gray;
      text-align: center;
    }
  </style>

</head>

<body>
  <div>
    <label for="">用户名：</label>
    <input type="text" id="txt1">
    <label for="">年龄：</label>
    <input type="text" id="txt2">
    <button id="btn">添加</button>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="box">

      </tbody>
    </table>
    <!-- 
   
     -->
    <script>
      //先判断本地存储中有没有数据，没有数据就是空数组。
      var data = JSON.parse(localStorage.getItem("data"))||[];
      //编号
      var index = localStorage.getItem("index")||1;

      var btn = document.getElementById("btn");
      btn.onclick = function(){
        //获取用户名
        var txt1 = document.getElementById("txt1")
        var username = txt1.value;
        //获取年龄
        var txt2 = document.getElementById("txt2")
        var age = txt2.value;
        //生成一个单元行
        initTr(index,username,age);
        //让本地存储中添加一条记录。
        let obj = {index,username,age};
        data.push(obj);
        index++;
        localStorage.setItem("data",JSON.stringify(data));
        localStorage.setItem("index",index);
      }
      var tbody = document.getElementById("box")
      for (var k = 0; k < data.length; k++) {
        initTr(data[k].index,data[k].username,data[k].age)
      }

      //生成一个单元行。
      function initTr(id,username,age) {
        //创建tr节点，创建4个td节点
        var tr = document.createElement("tr");
        var str = `
        <td>${id}</td>
        <td>${username}</td>
        <td>${age}</td>
        <td>
          <button class="del">删除</button>
        </td>`

        tr.innerHTML = str;
        
        //获取删除按钮
        var delBtn = tr.querySelector(".del");
        //给按钮绑定点击事件
        delBtn.onclick = function () {
          //获取删除行的index
          let delIndex = this.parentNode.parentNode.firstElementChild.innerHTML;
          data = data.filter(item=>item.index != delIndex);
          //更新到本地存储中
          localStorage.setItem("data",JSON.stringify(data));
          //找到当前行  tr 删除
          delBtn.parentNode.parentNode.remove();
        }
       
        //tr插入到tbody中。
        tbody.appendChild(tr);
      }
    </script>
  </div>

</body>