HTML5本地存储之Web Storage篇

最新推荐文章于 2019-12-05 17:21:46 发布
最新推荐文章于 2019-12-05 17:21:46 发布
阅读量146 收藏
点赞数
分类专栏： JS 文章标签： web存储
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42277719/article/details/103338959
版权

在这里插入图片描述

HTML5本地存储之Web Storage篇

代码如下：

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	<style type="text/css">
		#header{
			width: 500px;
			margin: 0 auto;
			border: 1px solid darkgoldenrod;
			text-align: center;
		}
		#result{
			width: 500px;
			margin: 0 auto;
			text-align: center;
		}
		#result table  {
			border: 1px solid #B8860B;
			width: 500px;
			
		}
		#result table tr td,#result table tr th{
			border: 1px solid #B8860B;
			
		}
	</style>
</head>

<body>
	<div id="header">
		<div id="add">
			<label for="sitename">网站名(key)：</label>
			<input type="text" id="sitename" name="sitename" class="text" />
			<br/>
			<label for="siteurl">网 址(value)：</label>
			<input type="text" id="siteurl" name="siteurl" />
			<br/>
			<input type="button" onclick="save()" value="新增记录" />
			<hr/>
		</div>
		<div id="find">
			<label for="findsite">输入网站名：</label>
			<input type="text" id="findsite" name="findsite" />
			<input type="button" onclick="find()" value="查找网站" />
			<p id="find_result"><br/></p>
		</div>
	</div>
	<div id="result">
		<table id="tab"  cellpadding="0" cellspacing="0">
			
		</table>
	</div>
	<script type="text/javascript">
		// 添加
		function save(){
			var sitename=$("#sitename").val();
			var siteurl=$("#siteurl").val();
			localStorage.setItem(sitename,siteurl);
			alert("添加成功");
			$("#sitename").val("");
			$("#siteurl").val("");
			loadData();
		}
		function find(){
			var findsite=$("#findsite").val();
			var siteurl=localStorage.getItem(findsite);
			$("#find_result").html(findsite+"网站的地址是："+siteurl);
		}
		
		// 加载数据
		function loadData(){
			var tab=$("#tab");
			tab.empty();
			tab.append($("<tr><th>网站名称</th><th>网站地址</th><th>操作</th></tr>"));
			if(localStorage.length>0){
				// 显示数据
				for(var i=0;i<localStorage.length;i++){
					var sitename=localStorage.key(i);
					var siturl=localStorage.getItem(sitename);
					var tr=$("<tr><td>"+sitename+"</td><td>"+siturl+"</td><td><a href='#' onclick='updRow(this)' >修改</a>&nbsp;<a href='#' onclick='delRow(this)'>删除</a></td></tr>");
					tab.append(tr);
				}
			}else{
				$("<tr><td colspan='3'>没有数据！</td></tr>").appendTo(tab);
			}
		}
		loadData();
		
		// 删除
		function delRow(th){
			
			// 删除表面
			//$(th).parent().parent().remove();
			// 要删除数据
			localStorage.removeItem($(th).parent().prev().prev().html());
			loadData();
		}
		
		// 修改
		function updRow(th){
			// td里添加input
			var value=$(th).parent().prev().html();
			var input=$('<input type="text" value="'+value+'" />');
			$(th).parent().prev().html("").append(input);
			// 修改按钮变保存
			$(th).html("保存").attr("onclick","saveRow(this)");
		}
		
		function saveRow(th){
			var sitename=$(th).parent().prev().prev().html();
			var siteurl=$(th).parent().prev().children().val();
			localStorage.setItem(sitename,siteurl);
			// 保存按钮变修改
			$(th).html("修改").attr("onclick","updRow(this)");
			$(th).parent().prev().html(siteurl);
		}
	</script>
</body>

代码就是这样

接下来是存储对象过程

效果图如下:
在这里插入图片描述


```javascript
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML5本地存储之Web Storage Json篇</title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<style type="text/css">
			#header{
				width: 500px;
				margin: 0 auto;
				border: 1px solid darkgoldenrod;
				text-align: center;
			}
			#result{
				width: 500px;
				margin: 0 auto;
				text-align: center;
			}
			#result table  {
				border: 1px solid #B8860B;
				width: 500px;
				
			}
			#result table tr td,#result table tr th{
				border: 1px solid #B8860B;
				
			}
			label{
				display: inline-block;
				width:120px;
				text-align: right;
			}
		</style>
	</head>

	<body>
		<div id="header">
			<div id="add">
				<label for="sitename">网站别名(key)：</label>
				<input type="text" id="alias" name="alias" class="text" />
				<br />
				<label for="sitename">网站名：</label>
				<input type="text" id="sitename" name="sitename" class="text" />
				
				
				<br />
				<label for="siteurl">网 址：</label>
				<input type="text" id="siteurl" name="siteurl" />
				<br/>
				<input type="button" onclick="save()" value="新增记录" />
				<hr/>
			</div>
			<div id="find">
				<label for="findsite">输入网站名：</label>
				<input type="text" id="findsite" name="findsite" />
				<input type="button" onclick="find()" value="查找网站" />
				<p id="find_result"><br/></p>
			</div>
		</div>
		<div id="result">
			<table id="tab"  cellpadding="0" cellspacing="0">
				
			</table>
		</div>
		<script type="text/javascript">
			// 添加
			var site = new Object;
			function save(){
				
				site.alias=$("#alias").val();
				site.sitename=$("#sitename").val();
				site.siteurl=$("#siteurl").val();
				
				var str = JSON.stringify(site); // 将对象转换为字符串
				localStorage.setItem(site.alias,str);
				alert("添加成功");
				$("#alias").val("");
				$("#sitename").val("");
				$("#siteurl").val("");
				loadData();
			}
			function find(){
				var findsite=$("#findsite").val();
				var str=localStorage.getItem(findsite);
				var site = JSON.parse(str);
				$("#find_result").html(findsite+"正名叫"+site.sitename+"网站的地址是："+site.siteurl);
			}
			
			// 加载数据
			function loadData(){
				var tab=$("#tab");
				tab.empty();
				tab.append($("<tr><th>网站别名</th><th>网站名称</th><th>网站地址</th><th>操作</th></tr>"));
				if(localStorage.length>0){
					// 显示数据
					for(var i=0;i<localStorage.length;i++){
						var sitekey=localStorage.key(i);
						var str=localStorage.getItem(sitekey);
						var site = JSON.parse(str);
						var tr=$("<tr><td>"+sitekey+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td><td><a href='#' onclick='updRow(this)' >修改</a>&nbsp;<a href='#' onclick='delRow(this)'>删除</a></td></tr>");
						tab.append(tr);
					}
				}else{
					$("<tr><td colspan='4'>没有数据！</td></tr>").appendTo(tab);
				}
			}
			loadData();
			
			// 删除
			function delRow(th){
				
				// 删除表面
				//$(th).parent().parent().remove();
				// 要删除数据
				localStorage.removeItem($(th).parent().prev().prev().html());
				loadData();
			}
			
			// 修改
			function updRow(th){
				// td里添加input
				var value=$(th).parent().prev().html();
				var input=$('<input type="text" value="'+value+'" />');
				$(th).parent().prev().html("").append(input);
				// 修改按钮变保存
				$(th).html("保存").attr("onclick","saveRow(this)");
			}
			
			function saveRow(th){
				var sitename=$(th).parent().prev().prev().html();
				var siteurl=$(th).parent().prev().children().val();
				localStorage.setItem(sitename,siteurl);
				// 保存按钮变修改
				$(th).html("修改").attr("onclick","updRow(this)");
				$(th).parent().prev().html(siteurl);
			}
		</script>
	</body>

</html>

写于2019年12月2号
小红帽与灰太狼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5本地存储之Web Storage详解
09-28
在HTML5中，Web Storage是一项重要的本地存储技术，它解决了传统cookie存在的诸多问题，如大小限制和不必要的网络传输。Web Storage分为两种类型：Session Storage和Local Storage，两者都是用来在用户的浏览器上...
HTML5本地存储之Web Storage实例篇,最有用的是localStorage
weixin_30859423的博客
11-10 153
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5本地存储之Web Storage篇</title> </head> <body> <div style...
HTML5本地存储之Web Storage应用介绍
09-28
HTML5的Web Storage是网页应用程序在客户端存储数据的重要机制，相比传统的HTTP Cookie，它提供了更为高效和容量更大的存储空间。Cookie通常限制在4KB，而Web Storage建议的存储空间为每个网站5MB，这使得它更适合...
HTML5 WebStorage(HTML5本地存储技术)
10-26
HTML5 WebStorage是现代网页应用中用于本地存储数据的关键特性，它解决了传统cookie技术的一些局限性，提供了更高效、安全的存储方式。WebStorage主要包含两种类型：localStorage和sessionStorage。 1. ...
详解H5本地储存Web Storage
09-28
【详解H5本地储存Web Storage】 一、本地存储的由来背景 在HTML4时代，网站如果想要在用户浏览器端存储信息，主要依赖于Cookie。然而，Cookie存在一些明显的限制，如大小不超过4096字节，浏览器对每个站点存储的...
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
热门推荐
林洪炳的日常技术积累
01-09 6万+
H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。 一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web
web storage 存图片
qian_an_hua_li的博客
05-30 302
function setImg(key,src){           var img = document.createElement('img');           //当图片加载完成的时候触发回调函数           img.addEventListener("load",function(){               var imgCanvas = document.creat
HTML5本地存储使用详解
小小喵的博客
08-04 1万+
HTML5本地存储使用详解 前言 随着Web应用的发展，需要在用户本地浏览器上存储更多的应用数据，传统的cookie存储的方案已经不能满足发展的需求，而使用服务器端存储的方案则是一种无奈的选择。HTML的Web Storage API是一个理想的解决方案。如果是存储复杂的数据，则可以借助Web SQL Database API来实现，可以使用SQL语句完成复杂数据的存储与查询。本...
JS 四种方法字符串逆序输出
weixin_42277719的博客
11-12 4835
如何js倒序输出字符串 下面展示代码 代码片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--实现字符串的逆序输出，效果如下： 输入：I Love Code 输出： edoC ...
web实现倒计时
weixin_42277719的博客
12-05 2945
前端倒计时 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script&gt...
H5正则表达式写在input里
weixin_42277719的博客
12-02 1236
H5正则表达式写在input里 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input { margin-left: 20px; ...
js Dom and jquery实现窗体内容左右移动
weixin_42277719的博客
11-25 296
js Dom and jquery实现窗体内容左右移动 第一种js写法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右移动</title> <script src="js/jquery-3.4.1...
DOM js and jQuery实现表格元素的删除添加
weixin_42277719的博客
11-20 222
DOM js实现表格元素的删除添加 今天老师让不用jQuery，让使用原始的js写出来的代码 体现严格的逻辑性和耐性的时刻到了 实现表格的删除插入 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> ...
手机端html本地存储,HTML5 web storage本地存储
最新发布
06-01
HTML5 Web Storage 是一种在客户端（即浏览器端）存储数据的技术，它包括两种存储方式：localStorage 和 sessionStorage。这两种存储方式都是以键值对的形式存储数据的，其中键和值都是字符串类型。 localStorage 和 sessionStorage 的区别在于，localStorage 存储的数据没有过期时间，而 sessionStorage 存储的数据在会话结束时会被清除。 在使用 localStorage 或 sessionStorage 时，可以通过 JavaScript 的 API 进行操作，例如： - 存储数据：localStorage.setItem(key, value) 或 sessionStorage.setItem(key, value) - 获取数据：localStorage.getItem(key) 或 sessionStorage.getItem(key) - 删除数据：localStorage.removeItem(key) 或 sessionStorage.removeItem(key) 需要注意的是，由于 Web Storage 是基于域名的，所以不同的域名下的 localStorage 和 sessionStorage 是互相隔离的，不能共享数据。此外，由于 Web Storage 是基于浏览器的，所以不同的浏览器也会互相隔离。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值