网页本地存储
网页本地存储
<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%的新粉丝。你是否意识到这一点呢？ 在直播开始时，欢迎新老粉丝的互动很重要。比…...
掌握Argos Translate：离线翻译与隐私保护实战指南
掌握Argos Translate：离线翻译与隐私保护实战指南 【免费下载链接】argos-translate Open-source offline translation library written in Python 项目地址: https://gitcode.com/GitHub_Trending/ar/argos-translate 在当今数据隐私日益受到重视的时代&…...
Qwen2.5-7B-Instruct升级体验：从1.5B到7B，感受旗舰模型的能力跃升
Qwen2.5-7B-Instruct升级体验：从1.5B到7B，感受旗舰模型的能力跃升 1. 引言：从轻量到旗舰的进化之路 作为长期关注开源大模型的技术从业者，我见证了Qwen系列模型的快速迭代。从最初的1.5B轻量版到如今的7B旗舰版，Qwen…...
3000份绝密文件外泄！Anthropic“核弹级”AI Mythos一夜封神，AGI防盗门被敲碎
Anthropic“防盗门”被敲了三下，声音来自自家后院。 一次配置失误，近3000份内部文档裸奔，把尚未出生的Mythos（对外昵称Capybara）推到了聚光灯下。 它有多强？一句话：在软件编程、学术推理、网络安…...
CAPL实战指南：如何构建并发送带计数器的自定义周期报文
1. 为什么需要带计数器的周期报文 在汽车电子测试中，模拟ECU通信是最基础也最频繁的需求之一。想象一下，你正在测试一个车载娱乐系统，需要验证它能否正确处理来自其他ECU的周期性状态更新。这时候，如果只是发送固定内容的报文&…...
书匠策AI：课程论文创作的“智能导航仪”，解锁学术新境界！
在学术的浩瀚海洋中，每一篇课程论文都是学子们扬帆起航、探索未知的航船。然而，面对茫茫的学术资料、错综复杂的逻辑结构，以及严格的格式要求，不少学子常常感到迷茫与无助。别怕，今天我要为你介绍一位论文写作的“智能…...
ResNet50实战：用Fruits-360数据集训练自己的水果分类模型（附完整代码）
ResNet50实战：用Fruits-360数据集训练自己的水果分类模型（附完整代码） 在计算机视觉领域，图像分类是最基础也最实用的任务之一。无论是工业质检、医疗影像分析还是零售商品识别，都需要可靠的分类模型作为支撑。而水果分…...
SecGPT-14B赋能教育行业：高校网络安全实验室AI教学平台搭建
SecGPT-14B赋能教育行业：高校网络安全实验室AI教学平台搭建 1. 引言：当网络安全教学遇上AI大模型 想象一下，在高校的网络安全实验室里，学生面对一个复杂的漏洞分析报告，不再需要花费数小时翻阅厚重的教材和零散的在线…...
GLM-Image创新应用：基于算法的艺术风格探索
GLM-Image创新应用：基于算法的艺术风格探索 当AI算法遇见艺术创作，会碰撞出怎样的火花？GLM-Image正在重新定义数字艺术的可能性边界。 1. 引言：算法与艺术的完美融合 在数字艺术创作领域，传统工具往往需要艺术家具备深…...
all-MiniLM-L6-v2问题修复：相似度计算与维度匹配错误处理
all-MiniLM-L6-v2问题修复：相似度计算与维度匹配错误处理 1. 问题概述 all-MiniLM-L6-v2作为轻量级句子嵌入模型，在实际应用中常遇到两类核心问题： 相似度计算异常：结果超出[-1,1]范围或明显不符合语义维度匹配错误：…...
Wan2.2-I2V-A14B开源大模型：支持LoRA微调与私有领域视频风格迁移
Wan2.2-I2V-A14B开源大模型：支持LoRA微调与私有领域视频风格迁移 1. 模型概述与核心能力 Wan2.2-I2V-A14B是一款开源的文生视频大模型，专为高质量视频生成任务设计。该模型在保持开源特性的同时，通过LoRA微调技术实现了对私有领域视频风格的…...