web 存储

最新推荐文章于 2022-04-21 11:38:25 发布

teayear

最新推荐文章于 2022-04-21 11:38:25 发布

阅读量523

点赞数 1

分类专栏：前端技术道本自然

本文链接：https://blog.csdn.net/zhangchen124/article/details/79230261

版权

道本自然同时被 2 个专栏收录

743 篇文章 40 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function saveStorage(){
				var data=new Object;
				data.name=document.getElementById('name').value;
				data.email=document.getElementById('email').value;
				data.phone=document.getElementById('phone').value;
				data.memo=document.getElementById('memo').value;
				//----转换json格式
				var str=JSON.stringify(data);
				alert(str);
				localStorage.setItem(data.name,str);
				alert('数据已经保存');
			}
			//查找web存储的数据
			function findStorage(id){
				var find=document.getElementById('find').value;
				var str=localStorage.getItem(find);
				var data=JSON.parse(str);
				var result="姓名："+data.name+'<br/>';
				result+="邮箱:"+data.email+'<br/>';
				result+="电话："+data.phone+'<br/>';
				result+="备注"+data.memo+'<br/>';
				var target=document.getElementById(id);
				target.innerHTML=result;
			}
		</script>
	</head>
	<body>
		<!--html代码-->
		<h1>使用Web Storage模拟数据库</h1>
		<table>
			<tr><td>姓名</td><td><input type="text" id="name"></td></tr>
			<tr><td>邮箱</td><td><input type="email" id="email"></td></tr>
			<tr><td>电话</td><td><input type="text" id="phone"></td></tr>
			<tr><td>备注</td><td><input type="text" id="memo"></td></tr>
			<tr>
				<td></td>
				<td><input type="button" value="保存" οnclick="saveStorage();"></td>
			</tr>
		</table>
		<hr />
		<p>检索:<input type="text" id="find"></p>
			   <input type="button" value="检索" οnclick="findStorage('msg');"/>
	    </p>
	    <p id="msg"></p>
	</body>
</html>

json格式的双向转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Web留言本</title>
		<script>
			function saveStorage(id){
				var data=document.getElementById(id).value;
				var time=new Date().getTime();
				localStorage.setItem(time,data);
				alert('数据已保存');
				loadStorage('msg');
			}
			function loadStorage(id){
				var result='<table border="1">';
				for(var i=0;i<localStorage.length;i++){
					var key=localStorage.key(i);
					var value=localStorage.getItem(key);
					var date=new Date();
					date.setTime(key);
					var datastr=date.toGMTString();
					result+='<tr><td>'+value+'</td><td>'+datastr+'</td></tr>';
				}
				result+='</table>';
				var target=document.getElementById(id);
				target.innerHTML=result;
			}
			function clearStorage(){
				localStorage.clear();
				alert('全部数据被清除。');
				loadStorage('msg');
			}
		</script>
	</head>
	<body>
		<h1>Web留言本</h1>
		<textarea id="memo" cols="60" rows="10"></textarea><br />
		<input type="button" value="追加" οnclick="saveStorage('memo');" />
		<input type="button" value="初始化" οnclick="clearStorage('msg');" />
		<hr />
		<p id="msg"></p>
	</body>
</html>

WEB SQL的存储

视频课堂https://edu.csdn.net/combo/detail/802