网页本地存储
网页本地存储
<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%的新粉丝。你是否意识到这一点呢？ 在直播开始时，欢迎新老粉丝的互动很重要。比…...
观成科技：隐蔽隧道工具Ligolo-ng加密流量分析
1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...