网页本地存储
网页本地存储
<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);}}//清空所有的itemfunction 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);}}//重置localstoragefunction 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>
<html><script>//添加数据函数，可添加一个字段function adddata(){var text;text=document.getElementById('text').value;index=localStorage.length+1;localStorage.setItem(index,text);}
// 删除
function dele(){var idd=document.getElementById('idd').value;localStorage.removeItem(idd);}
// 修改
function modify(){var id=document.getElementById('id').value;var value=document.getElementById('value').value;// localStorage.setItem(id,value);localStorage.removeItem(id);localStorage.setItem(id,value);
}//显示localStorage所有内容// 表格显示function show_table(){var element = document.getElementById("showall");var table = document.getElementById("table");for(var i=0;i<localStorage.length;i++){// 获取插入位置dom元素var row = document.createElement('tr');var id = document.createElement('td');var value = document.createElement('td');row.appendChild(id);row.appendChild(value);// index 是string类型，将数字转换为字符id.textContent = i ;value.textContent = localStorage.getItem(i.toString());// value.textContent='va';table.appendChild(row);}}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);}}//重置localstoragefunction clearall(){localStorage.clear();}</script><body><p>输入需要添加的数据</p><!-- 输入框 --><input id="text" type="text"><!-- 增 --><button type="" onclick=adddata()>点击添加数据</button><!-- 查询 --><button onclick=showall()>列表显示所有记录</button><!-- 表格显示 --><button onclick=show_table()>表格显示记录</button><!-- 重置 --><button onclick=clearall()>清空所有记录</button>
<!-- 修改 --><div style="display: block;"><input id="id" type="text"><input id="value" type="text"><button onclick=modify()>输入索引和内容修改</button></div><!-- 删除 -->
<div style="display: block;"><input id="idd" type="text"><button onclick=dele()>输入索引删除</button>
</div><p id="showall"></p><table id="table" ><tr ><td>编号</td><td >内容</td></tr></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 add(){var text;textdocument.getElementById(text).value;indexlocalStorage.length1;localStorage.setItem(index,text);}//显示localStorage所有内容function showall(){storagelocalStorage;var length stor…...
SpringBoot2：web开发常用功能实现及原理解析-@ControllerAdvice实现全局异常统一处理
文章目录 前言1、工程包结构2、POM依赖3、Java代码 前言 本篇主要针对前后端分离的项目，做的一个统一响应包装、统一异常捕获处理。 在Spring里，我们可以使用ControllerAdvice来声明一些关于controller的全局性的东西，其用法主要有以下三点…...
DockerLinux安装DockerDocker基础
Linux软件安装 yum命令安装 通过yum命令安装软件,是直接把软件安装到Linux系统中 安装和卸载都比较麻烦,因为软件和系统是强关联的 Docker docker是一种容器技术,可以解决软件和系统强关联关系,使得软件的安装和卸载更方便,它可以将我们的应用以及依赖进行打包,制作出一个镜…...
macOS平台TensorFlow环境安装
1.安装xtarfile pip3 install xtarfile 2.安装 pip3 install matplotlib 3.安装jieba pip3 install jieba 4.安装 pip3 install tensorflow tensorflow安装成功...
全网最全 线程邮箱
线程邮箱的优缺点 优点 避免资源竞争：线程邮箱通过队列和互斥锁来管理线程间的通信，确保只有持有锁的线程可以访问和修改队列中的数据，从而避免了多个线程同时尝试修改同一资源时可能出现的竞争条件，减少了因资源竞争导致的死锁…...
Linux下rpm方式部署mysql（国产化生产环境无联网服务器部署实操）
请放心观看，已在正式环境部署验证，流程无问题！ 所用系统为国产化麒麟银河 aarch64系统，部署时间2024年9月份！ #查看服务器信息 #涉及生产服务器，所以输出信息隐藏了一部分[rootecs-xxxxx hdata]# uname -…...
【Python机器学习】NLP信息提取——正则模式
我们需要一种模式匹配算法，该算法可以识别与模式匹配的字符序列或词序列，以便从较长的文本字符串中“提取”它们。构建这种模式匹配算法的简单方法是在Python中，使用一系列if/else语句在字符串的逐个位置查找该符号（单词或字符&am…...
opc服务器与opc服务器如何通讯
OPC（OLE for Process Control，即过程控制对象链接）是一种工业自动化领域常用的通讯协议，它提供了一种标准化的方式，使得不同厂家的设备可以互相通讯。OPC服务器是运行在计算机上的软件程序，用于接收和处理来…...
指针 （六）
OK，书接上回，咱们继续： 一 . 函数指针变量 （1）函数指针变量的创建 首先我们得明白，什么是函数指针变量呢？从我们之前学习过的整型指针，数组指针的相关知识当中，通过类…...
Linux下vscode配置C++和python编译调试环境
Visual Studio Code (简称 VSCode) 是由微软开发的一款免费、开源、跨平台的代码编辑器。它支持 Windows、macOS 和 Linux 操作系统，并且内置对多种编程语言的支持，包括但不限于 C/C、Python、JavaScript、TypeScript、Java 和 Go 等。VSCode 主要用于编…...
OrionX GPU算力池助力AI OCR场景应用
01 AI OCR的历史及概念 OCR（Optical Character Recognition，光学字符识别）是指采用光学的方式将纸质文档中的文字转换成为黑白点阵的图像文件，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文…...
移动端如何实现智能语音交互
智能语音交互（Intelligent Speech Interaction）是基于语音识别、语音合成、自然语言理解等技术，为企业在多种实际应用场景下，赋予产品“能听、会说、懂你”式的智能人机交互功能。适用于智能问答、智能质检、法庭庭审实时记录、实…...
HTTPS：构建安全通信的基石
HTTPS（Hypertext Transfer Protocol Secure），作为互联网上安全通信的基石，通过在HTTP基础上引入SSL/TLS协议层，实现了数据传输的加密，确保了信息的机密性、完整性和真实性。这一过程涉及多个精细设计的步骤…...
OceanBase 企业版OMS 4.2.3的使用
OceanBase 企业版OMS 4.2.3的使用 一、界面说明 1.1 概览 1.2 数据迁移 1.3 数据同步 1.4 数据源管理 1.5 运维监控 1.6 系统管理 二、功能说明 注意： 在数据迁移与数据同步的功能中，如果涉及到增量操作： 1.需要使用sys租户的用…...
STM32中的计时与延时
前言 在裸机开发中，延时作为一种规定循环周期的方式经常被使用，其中尤以HAL库官方提供的HAL_Delay为甚。刚入门的小白可能会觉得既然有官方提供的延时函数，而且精度也还挺好，为什么不用呢？实际上HAL_Delay中有不少坑，而这些也只是HAL库中无数坑的其中一些。想从坑里跳出来…...
[论文笔记] CSFCN
摘要 上下文建模或多级特征融合方法已被证明可以有效提高语义分割性能。 然而，它们并不是专门处理像素上下文不匹配和空间特征不对齐的问题，并且高计算复杂度阻碍了它们在实时场景中的广泛应用。 在这项工作中，我们提出了一种轻量级的上下文…...
mac电脑命令行获取电量
在 macOS 上，有几个命令行工具可以用来获取电量信息，最常用的是 pmset 命令。你可以通过以下方式来查看电池状态和电量信息： 查看电池状态： pmset -g batt这个命令会返回类似下面的输出： Now drawing from Battery Pow…...
2024桥梁科技两江论坛——第二届桥梁工程安全与韧性学术会议
文章目录 一、会议详情二、重要信息三、大会介绍四、出席嘉宾五、征稿主题六、咨询 一、会议详情 二、重要信息 大会官网：https://ais.cn/u/vEbMBz提交检索：EI Compendex、IEEE Xplore、Scopus 三、大会介绍 2024年桥梁科技两江论坛——第二届桥梁工程…...
性能测试-jmeter的控制器（十六）
一、if控制器 需求：使用“用户自定义变量”定义name变量，值可以是“baidu”或“itcast”,使用变量值，控制是否访问对应网站。 1、步骤： 在测试计划中添加用户定义的变量name,取值可为baidu或itcast添加两个http请求：…...
直播开播极速流，如何有效接入？
如何有效接入开播极速流？为什么你的直播流速会逐渐下降？开播极速流实际上是我们流速的巅峰阶段，这一阶段的流量构成通常是70%的老粉丝和30%的新粉丝。你是否意识到这一点呢？ 在直播开始时，欢迎新老粉丝的互动很重要。比…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？
Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障
关键领域软件测试的"安全密码"：Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力，从金融交易到交通管控，这些关乎国计民生的关键领域…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...