网页本地存储
网页本地存储
<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%的新粉丝。你是否意识到这一点呢？ 在直播开始时，欢迎新老粉丝的互动很重要。比…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。 具体可参…...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂（如抗体、抑制肽）在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上，高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术，但这类方法普遍面临资源消耗巨大、研发周期冗长…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...
pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决
问题： pgsql数据库通过备份数据库文件进行还原时，如果表中有自增序列，还原后可能会出现重复的序列，此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”，…...