HTML5本地存储之Web Storage篇

在这里插入图片描述

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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值