网页本地存储

爱小黄

于 2024-09-15 16:46:41 发布

阅读量68

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_44110581/article/details/142285579

版权

网页本地存储

<html>
<script>


  //添加数据
    function add(){
        var text;
        text=document.getElementById('text').value;
        index=localStorage.length+1;
        localStorage.setItem(index,text);
    }
    //显示localStorage所有内容
    function showall(){
      storage=localStorage;
      var length = storage.length
    //   在控制台打印数据
      for(var i=0;i<length;i++){
        // 索引
        var index = storage.key(i);
        // 值
        var value = storage.getItem(index);

     

    // 控制台打印值
        console.log(value);

        //   使用表格形式显示
        //  获取插入位置dom元素
    
        var element = document.getElementById("showall");
        // 创建行元素
      const row = document.createElement('tr');
        //   创建列元素
      const cell = document.createElement('td');
      const cel2 = document.createElement('td');


    //   给列元素赋值
      cell.textContent ="1";
      cel2.textContent ='value';
      row.appendChild(cell)
      row.appendChild(cel2)
      element.appendChild(row);
      }

      //显示到html。
      var showall = document.getElementById("showall")
      showall.innerHTML = JSON.stringify(storage);

      for(var i =0;i<localStorage.length+1;i++){
     //   使用表格形式显示
        //  获取插入位置dom元素
        var element = document.getElementById("table");
        // 创建行元素
      const row = document.createElement('tr');
        //   创建列元素
      const cell = document.createElement('td');
      const cel2 = document.createElement('td');


    //   给列元素赋值
      cell.textContent =i;
      cel2.textContent =localStorage.getItem(i);
      row.appendChild(cell)
      row.appendChild(cel2)
      element.appendChild(row);
      }
      
}
   //清空所有的item

    function clearall(){
      localStorage.clear();
    }

    
</script>
<body>
    需求分区
    使用html+js 实现数据的存储价值
    下一步计划，期望，目标是格式化输出的数据格式，以表格的形式显示数据。
  <p>输入需要添加的数据</p>
  <!-- 输入框 -->
    <input id="text" type="text">
    <!-- 增 -->
    <button type="" onclick=add()>点击添加数据</button>
    <!-- 查询 -->
    <button onclick=showall()>显示所有记录</button>
    <!-- 全部删除 -->
    <button onclick=clearall()>清空所有记录</button>


<p id="showall"></p>
<p id="jsonDataTable" class="jsonDataTable"></p>
<table id="table">
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
  </tr>
  <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>

  </tr>
</table>
    <table id="jsonDataTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>City</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</body>
</html>


<style>
    table {
        border-collapse: collapse;
        width: 50%;
        margin: auto;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

在这里插入图片描述

更新
在这里插入图片描述



  <html>
  <script>
    //添加数据函数，可添加一个字段
      function adddata(){
          var text;
          text=document.getElementById('text').value;
          index=localStorage.length+1;
          localStorage.setItem(index,text);
      }
      //显示localStorage所有内容
      function showall(){
        var element = document.getElementById("showall");
        for(var i=0;i<localStorage.length;i++){
          var value = localStorage.getItem(localStorage.key(i));
          //  获取插入位置dom元素
          var id = document.createElement('p');
          id.textContent =i+" "+value;
          element.appendChild(id);
        }
  }
    //重置localstorage
      function clearall(){
        localStorage.clear();
      }
  </script>
  <body>

    <p>输入需要添加的数据</p>
    <!-- 输入框 -->
      <input id="text" type="text">
      <!-- 增 -->
      <button type="" onclick=adddata()>点击添加数据</button>
      <!-- 查询 -->
      <button onclick=showall()>显示所有记录</button>
      <!-- 重置 -->
      <button onclick=clearall()>清空所有记录</button>
      <button onclick=modify()>修改</button>

  <p id="showall"></p>
  </body>
  </html>