网页本地存储

news2024/11/15 8:49:17

网页本地存储

<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>




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2138383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

209.长度最小的子数组(滑动窗口类)

文章目录 209.长度最小的子数组滑动窗口904. 水果成篮76. 最小覆盖子串 209.长度最小的子数组 209.长度最小的子数组 给定一个含有 n 个正整数的数组和一个正整数 s &#xff0c;找出该数组中满足其和 ≥ s 的长度最小的 连续 子数组&#xff0c;并返回其长度。如果不存在符合…

2020ICPC上海 D - Walker M - Gitignore

D: 首先显然要二分,判断当前二分的mid时间下是否能满足走满0~n 枚举所有情况,这里按照左,右起点p1,p2分别讨论 p1向左 p2向左(以下向左和向右都代表向左或者向右到墙,而不代表初速度方向)&#xff0c;只需要计算p1或者p2反弹之后还能走距离n就是合法 p1向左 p2向右&#xff…

C++在Linux实现多线程和多进程的TCP服务器和客户端通信

多进程版本 服务器 #include <arpa/inet.h> #include <stdlib.h> #include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/socket.h> #include <sys/wait.h> #include <signal.h> #include <string&…

软件设计师——程序设计语言

目录 低级语言和高级语言 编译程序和解释程序 正规式&#xff0c;词法分析的一个工具 有限自动机 ​编辑 上下文无关法 ​编辑 中后缀表示法 杂题 ​编辑 低级语言和高级语言 编译程序和解释程序 计算机只能理解由0、1序列构成的机器语言&#xff0c;因此高级程序设计…

CAD_Electrical 2022使用记录

一、CAD软件实用调整 1、如何调节窗口背景颜色 例如&#xff1a;将图中白色的背景色调节为黑色。 步骤&#xff1a;在CAD空白区域点击右键 -> 点击选项 -> 在显示中点击颜色(窗口元素) -> 将二维模型空间统一背景的颜色修改成需要的颜色 2、如何调节关标大小 例如&a…

IP纯净度对跨境电商有哪些影响

在全球化贸易的浪潮中&#xff0c;跨境电商凭借其打破地理界限的能力&#xff0c;成为推动国际贸易的重要力量。然而&#xff0c;跨境电商的运营并非没有挑战&#xff0c;其中IP纯净度是影响其成功的关键因素之一。本文将探讨IP纯净度对跨境电商运营的多方面影响&#xff0c;并…

Linux基础---08软件的安装

安装方式优缺点编译安装自由定制&#xff0c;但较为繁琐rmp安装安装简单&#xff0c;但需要自己解决依赖&#xff0c;不支持定制yum安装自动解决rmp依赖&#xff0c;但不支持定制&#xff08;用的更多&#xff09; 下面就具体介绍三大安装方式&#xff1a; 一.编译安装 用Li…

2024/9/15 408“回头看”之应用层小总结(下)

域名系统DNS: 本地域名服务器 本地域名服务器起着代理的作用&#xff0c;会将报文转发到根域名服务器、顶级域名服务器、权限域名服务器。 递归查询&#xff1a; 迭代查询&#xff1a; 文件传送协议FTP: FTP客户和FTP服务器之间使用的是tcp连接。 控制连接使用21端口&…

长业务事务的离线并发问题

事务指代一组操作同时成功或同时失败&#xff0c;事务可分为两类&#xff1a; 系统事务&#xff1a;即关系数据库事务&#xff0c;一次数据库连接中由start transaction或begin开启&#xff0c;commit表示提交&#xff0c;rollback表示回滚&#xff1b;业务事务&#xff1a;完…

海外VS国内:网安上市公司人均创收对比

二级市场分析章节中分析了中国网络网络安全上市公司人均创收63.2万、人均毛利37.6万&#xff0c;人均创利-1.6万。 有网友问了&#xff1a;海外网络安全公司的人均情况如何&#xff1f;那么让我们一起看看吧。 我们统计了在海外上市的28家主要网络安全公司的2023年的人均情况&…

Python互相关统计学 地震学 心理学 数学物理和算法模型及数据科学应用

&#x1f3af;要点 同步时间序列数据地震时频域信息绘制地震噪声干涉图和频谱计算光变曲线和时滞互相关光变曲线并计算峰值和质心图像几何对应关系算法气候相关矩阵图测量麦克风间距离图像相似性量化及显着性统计测试个体同步性量化分析计算绘制有无泊松噪声的光曲线地震幅度和…

通信工程学习:什么是接入网(AN)中的CF核心功能

接入网&#xff08;AN&#xff09;中的CF核心功能 在通信工程中&#xff0c;CF&#xff08;Core Function&#xff09;通常指的是核心功能&#xff0c;它是接入网&#xff08;AN&#xff09;中的一个重要组成部分。CF的主要作用是将用户或业务端口的承载要求与公共传送承载进行…

一键生成中秋国风插画!FLUX中秋专属Lora的使用教程

如何在中秋节期间快速生成富有节日气氛的国风插画吗&#xff1f; 不需要复杂的设计技能&#xff0c;或者手绘功底。只需借助FLUX中秋专属Lora-中秋国风人物插画v1.0_FLUX&#xff0c; 就可以轻松实现一键生成精美插画&#xff0c;特别适合用于宣传海报、包装设计等场景。 这个…

6.接口测试加密接口(Jmeter/工具/函数助手对话框、Beanshell脚本)

一、接口测试加密接口&#xff0c;签名接口 1.加密算法&#xff1a; 可以解密的&#xff1a; 对称式加密&#xff08;私钥加密&#xff09;&#xff1a;AES&#xff0c;DES&#xff0c;Base64 https://www.bejson.com 非对称加密&#xff08;双…

编写程序模版的搭建

1 完整的程序工程有些部分组成 1.1 头文件介绍 头文件嵌套包括的功能 CCS如何找到需要的头文件 1.2 源文件 1.3 库文件 1.4 CMD文件 2 工程模板创建 2.1 获取工程模板基础文件 <

CleanMyMac X 4.15.6正式版 mac直装破解版

你知道 CleanMyMac是什么吗&#xff1f;它的字面意思为“清理我的Mac”&#xff0c;作为软件&#xff0c;那就是一款 Mac清理工具 &#xff0c;Mac OS X 系统下知名系统清理软件&#xff0c;是数以万计的Mac用户的选择。它可以流畅地与系统性能相结合&#xff0c;只需…

dubbo一

Dubbo 分布式系统的演进 SOA面向服务架构 NSA微服务架构 节点与网络 分片和冗余 分布式系统挑战 分布式系统特性与衡量标准 一致性理论 强一致性ACID CAP 弱一致性BASE 一致性算法 dubbo dubbo六大核心功能 API与SPI

【第36章】Spring Cloud之Seata分布式事务

文章目录 前言一、架构图1. 介绍2. 项目结构3. 功能描述 二、用例1. 准备1.1 系统表1.2 业务表1.3 初始化数据 2. 项目搭建2.1 项目结构2.2 主要依赖2.3 主要配置 三、主要业务代码1. 仓储服务1.1 controller1.2 service1.3 dao 2. 订单服务1.1 controller1.2 service1.3 dao 3…

对操作系统(OS)管理和进程的理解

文章目录 从冯诺依曼体系入手来了解计算机硬件部分操作系统操作系统的概念设计操作系统&#xff08;OS&#xff09;的目的对下&#xff08;硬件&#xff09;OS的管理对上如何理解系统调用 进程 在计算机系统中&#xff0c;硬件、操作系统和进程是三个至关重要的概念。它们相互协…

【数据库】MySQL内置函数

本篇分享一些在MySQL中常见的一些内置函数&#xff0c;如日期函数&#xff0c;字符串函数和数学函数&#xff0c;以方便于操作数据库中的数据。 1.日期函数 我们先整体观察一下这些函数再讲解案例 日期函数使用起来都非常就简单 获得年月日&#xff1a; select current_dat…