网页本地存储
网页本地存储
<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%的新粉丝。你是否意识到这一点呢？ 在直播开始时，欢迎新老粉丝的互动很重要。比…...
stm32 W25Q数据存储
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、cubemx配置二、keil中文件修改与配置三、几个重要函数的说明四、DMA方式传输（待写）总结 前言 W25Q128 容量为128位 128/8 16 也就…...
深度学习的笔记
1. 从huggingface上仅下载pytorch模型权重和配置文件到服务器 import os import shutil from huggingface_hub import snapshot_download# 直接指定模型和下载路径 model_name openai/clip-vit-base-patch32 download_path /home/xxx/.cache/huggingface/hub/models--anas-a…...
音视频入门基础：AAC专题（8）——FFmpeg源码中计算AAC裸流AVStream的time_base的实现
一、引言 本文讲解FFmpeg源码对AAC裸流行解复用（解封装）时，其AVStream的time_base是怎样被计算出来的。 二、FFmpeg源码中计算AAC裸流AVStream的time_base的实现 FFmpeg对AAC裸流进行解复用（解封装）时，其…...
React 组件的基本使用，useState 状态变量的使用
React 组件 组件是什么 ##### 概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以相互嵌套，也可以多次复用。 在 React，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视…...
空洞骑士 Hollow Knight 攻略
文章目录 Part.I IntroductionPart.II 攻略Chap.I 地图Chap.II 护符Chap.III BOSSChap.IV 魔法 Reference Part.I Introduction 《空洞骑士》是独立团队 Team Cherry 开发的一款 2D 类银河恶魔城动作冒险游戏。本文记录笔者玩此游戏所积累的一些经验。 「在《空洞骑士》中打造…...
CSP-J 算法基础 广度优先搜索BFS
文章目录 前言广度优先搜索是什么广度优先搜索的实现BFS 的具体编程实现举例：广度优先搜索的具体步骤初始状态：步骤 1：加入起点节点 1步骤 2：访问队列中的节点 1，加入其邻居节点 2 和 4步骤 3：访问队列中的…...
What is new in C# 7,8,9,10
目录 Whats new in C# 7 C# 7 in Visual Studio 2017 Out Variables Pattern Matching Tuples （System.ValueTuple） Deconstruct解构 Local Functions Ref Returns and Locals Expression Bodied Members Throw Expressions Generated Async R…...
Sqlserver常用sql
1. 数据库和表操作 创建数据库 CREATE DATABASE DatabaseName; 删除数据库 DROP DATABASE DatabaseName; 创建表 CREATE TABLE TableName ( Column1 DataType1, Column2 DataType2, ... ); 删除表 DROP TABLE TableName; 2. 数据操作 插入数据 INSERT INTO TableNam…...
基于SpringBoot+Vue+MySQL的考研互助交流平台
系统展示 用户前台界面 管理员后台界面 系统背景 本文设计并实现了一个基于SpringBoot、Vue.js和MySQL的考研互助交流平台。该平台旨在为广大考研学子提供一个集资源共享、学习交流、经验分享、心理辅导等功能于一体的综合性在线社区。通过SpringBoot构建高效稳定的后端服务&am…...
chatgpt个人版ssrf漏洞
文章目录 免责申明搜索语法漏洞描述漏洞复现修复建议 免责申明 本文章仅供学习与交流，请勿用于非法用途，均由使用者本人负责，文章作者不为此承担任何责任 搜索语法 fofa title"ChatGPT个人专用版"漏洞描述 该系统是一个开源的…...