JS-本地存储与删除

最新推荐文章于 2024-06-02 15:11:21 发布
最新推荐文章于 2024-06-02 15:11:21 发布
阅读量3.6k 收藏 6
点赞数
分类专栏： 前端 文章标签： JS-本地存储与删除
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44382124/article/details/87991431
版权 
	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
			th,td{line-height: 30px;text-align: center;border: 1px solid gray;width: 100px;}
		</style>
	</head>
	<body>
		<label for="">用户名：</label><input type="text"><br>
		<label for="">密码：</label><input type="password"><br>
		<label for="">重复密码：</label><input type="password"><br>
		<label for="">电话：</label><input type="text"><br>
		<a href="javascript:void(0)"><button>注册</button></a>
		<button>显示</button><br>
	
		<table>
		    <thead>
				<tr>
					<th>用户名</th>
					<th>密码</th>
					<th>电话</th>
					<th>操作</th>
				</tr>
		    </thead>
		    <tbody>
				<!-- <tr>
					<td>Jack</td>
					<td>123456</td>
					<td>16890890987</td>
					<td><a href="javascript:void(0)">删除</a></td>
				</tr> -->
		    </tbody>
		</table>
	
		<script type="text/javascript">
			//1.点击 注册  录入数据     //2.点击 显示  显示所有数据      //3.点击 删除  删除数据
			var ipt=document.querySelectorAll('input');
			var tab=document.querySelector('tbody');
			var arr,arr0;
			var btn=document.querySelectorAll('button');
			var key='ps';
	        //录入数据
			btn[0].onclick=function () {
			      var p1=new Person(ipt[0].value,ipt[1].value,ipt[3].value);
			      //获取本地数据
			      var date=getDate(key);
			      //判断本地原先是否存有数据
			      if (date!=null) {
			      	arr=JSON.parse(date);
			      }else{
			      	arr=[];
			      }
			      arr.push(p1);
			      setDate(key,arr);
			};
	        //输出数据
			btn[1].onclick=function () {
				clearTab();
	            showDate();		
			};
	
	        //输出表格
			function showDate() {
				//取出本地数据
				arr0=JSON.parse(getDate(key));
				if (arr0==null) {
					return;
				}
				arr0.forEach(function (item) {
					var tr=createTr(item.sname,item.password,item.tele);
					tab.appendChild(tr);
				});
	
			}
			//清除表格内容
			function clearTab() {
				var tr0=tab.getElementsByTagName('tr');
				for (var i = 0,len=tr0.length; i < len; i++) {
					tab.removeChild(tr0[0]);
				}
			}
			//删除本地数据
			function clearDate(Otr) {
				var index=getIndex(Otr);
				if (index==-1) {
					return;
				}
				tab.removeChild(Otr);
				arr0.splice(index,1);
				setDate(key,arr0);
	
	            
			}
			//获取要点击对象在节点中的位置
			function getIndex(Otr) {
				var tr1=tab.getElementsByTagName('tr');
				for (var i = 0; i < tr1.length; i++) {
					if (Otr==tr1[i]) {
						return i;
					}
				}
				return -1;
			}
	       
	        //创建表格
	        function createTr(sname,pwd,tel) {
	        	var tr=document.createElement('tr');
	        	tr.insertCell().innerHTML=sname;
	        	tr.insertCell().innerHTML=pwd;
	        	tr.insertCell().innerHTML=tel;
	        	var td=tr.insertCell();
	        	var link=document.createElement('a');
	        	link.href='javascript:void(0)';
	        	link.innerHTML='删除';
	        	link.onclick=function () {
	        		clearDate(this.parentNode.parentNode);
	        	}
	        	td.appendChild(link);
	        	tr.appendChild(td);
	        	return tr;
	        }
	        //存储本地
	        function setDate(key,value) {
	        	value=JSON.stringify(value);//将value转换为字符串
	        	localStorage.setItem(key,value);
	        }
	        //获取数据
	        function getDate(key) {
	
	        	return localStorage.getItem(key);
	
	        }
	        //构造函数
	        function Person(name,pwd,telep) {
	        	this.sname=name;
	        	this.password=pwd;
	        	this.tele=telep;
	        }
		</script>
	</body>
	</html>
学无止境---活到老，学到老
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js本地存储、获取、删除、清空
weixin_48009560的博客
03-31 3672
利用原生js手撕本地存储实现 存储、获取、删除、清空功能。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text"/> <button class="set">存储</button> <
js清空本地存储_js中数据在内存中的存储的方式
weixin_39820173的博客
11-22 261
首先计算机存储数据的方式分为外存(硬盘)和内存两种方式，内存中的数据一断电就会被清空，但硬盘是不会的，所以计算机调取数据是从内存中调取，因为它速度更快，而内存中的数据从外存中调取，所以这让我们的计算机系统化，各尽其职，当然外存在当今来说您可以选择ssd去提升自己电脑的性能，这样内存在调去数据的时候会更快，cpu也会更快的获取到数据去处理它上面说了这么多也是介绍下计算机的存储环境，那回归正题，js作...
JS入门-本地存储
m0_53822923的博客
02-15 1107
简单了解下JS中的本地存储sessionStorage和localStorage
前端如何去除本地版本号缓存
最新发布
前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！
06-02 475
这些方法可以根据具体的开发需求和场景选择使用，以达到清除前端缓存的目的。
javascript - localStorage 本地存储（新增、删除、修改）使用教程
高级前端工程师
02-03 3997
js localStorage用法:新增、修改、删除JavaScript localStorage本地存储的简单使用JavaScript - localStorage的增删改查JavaScript中本地存储(LocalStorage)和会话存储js如何操作localstoragejs如何操作localstorage_javascript技巧什么是JavaScript中的本地存储以及如何使用它javascript - 很全很全的前端本地存储讲解JavaScript使用localStorage存储数据html5
JS-WebAPIs-本地存储（五）-学生统计表案例
01-20
在JavaScript的世界里，Web APIs是开发者用来与浏览器交互的重要工具，它们提供了丰富的功能，使得JavaScript不仅可以操作DOM，还能处理数据、实现与用户的交互以及与服务器通信。本篇将重点讲解如何利用Web APIs中...
JS实现本地存储信息的方法(基于localStorage与userData)
10-20
在JavaScript中，本地存储数据的需求常常出现，特别是在Web应用程序中，需要在用户关闭浏览器后仍然保留某些信息，例如用户的偏好设置、游戏进度等。传统的Cookie虽然可以实现这个功能，但它存在容量限制（一般为4...
基于js 本地存储(详解)
10-19
JavaScript本地存储技术允许开发者在用户浏览器中保存数据，即使用户关闭了浏览器，这些数据仍然能够被保留。这在实现特定功能如记住用户状态、购物车持久化等方面非常有用。主要的本地存储方案包括Cookie、...
js-localstorage-wishlist:用本地存储写的愿望灯
05-05
总之，`js-localstorage-wishlist`是一个利用JavaScript本地存储功能实现的愿望清单应用，它展示了如何在浏览器端进行数据持久化存储，以及如何通过用户界面与这些数据交互。通过学习这个项目，你可以进一步理解...
database-js-localstorage:使用本地存储作为表存储机制的数据库驱动程序
04-28
数据库js本地存储 Web浏览器本地存储的Database-js接口 关于 Database-js-localstorage是使用Web浏览器本地存储作为后端的驱动程序。 它支持表创建，选择，插入，删除和更新。 选择可以使用内部，左侧和右侧联接。 ...
JQuery.cookie.js的使用案例(读取、存储、删除).zip
07-06
参考文档地址：http://blog.csdn.net/u014175572/article/details/51837014 JQuery.cookie.js的使用案例(读取、存储、删除).zip JQuery.cookie.js的使用案例(读取、存储、删除).zip
js 清除本地缓存 localStorage
Hero_rong的博客
01-10 3万+
1.创建缓存 localStorage.setItem('doEdit', this.doEdit); 2.读取缓存 localStorage.getItem('doEdit', this.doEdit); 3.清除缓存 localStorage.clear();
清理localstorage_关于本地存储：在javascript中清除localStorage？
weixin_35767338的博客
12-30 8685
是否有任何方法可以重置/清除浏览器在javascript中的本地存储？使用此项清除本地存储：localStorage.clear();如果应用程序在之后重新启动，它仍然存在…@半烤一点也不。也许你的应用程序又重新设置了？当我的应用程序启动时，我会调用localstorage.clear()，但即使我关闭浏览器、清除缓存等，数据仍然存在。我知道这一点是因为我在初始化时将模型上的"instance"属...
js localStorage保存/获取/删除
phpfzh的博客
09-27 1万+
var TOKEN_KEY = "jwtToken"; //取值  function getJwtToken() {         return localStorage.getItem(TOKEN_KEY);     } //保存     function setJwtToken(token) {         localStorage.setItem(TOKEN_
HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据
热门推荐
乐于学习、乐于分享、乐于总结
12-27 7万+
清空localStorage的全部数据 function $(id){ return document.getElementById(id);  } var intNum = 0; //保存数据函数 function add_click(){ for(var intI = 0;intI var strKeyName = "strKeyName"
本地存储的使用跟删除
有问题可关注公众号：前端研究院 后台输入问题回复
09-07 4269
// 设置值     sessionStorage.setItem('key_a', 1);     // 取值     var key_a = sessionStorage.getItem('key_a');     console.log(key_a);     // 删除     sessionStorage.removeItem('key_a');
js 设置本地存储过期时间
09-09
在JavaScript中，可以使用`localStorage`对象来设置本地存储的过期时间。然而，`localStorage`本身并没有直接提供设置过期时间的方法，但我们可以通过一些技巧来实现。 一种常见的方法是使用`localStorage`来存储一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值